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在 万 维 网 WWW) 上 , 一 个 超 媒体 文档 称 为 一 个 页 面 (Page), 作为 一 个 组 织 或 者 个 
人 在 万 维 网 上 放置 开始 点 的 页 面 称 为 主页 或 首页 (Homepage)。 主 页 中 通常 包含 有 指向 
其 他 相关 页 面 或 节点 的 指针 (超级 链接 )。 所 谓 超级 链接 ， 就 是 一 种 统一 资源 定位 器 
(Uniform Resource Locator, URL) 指 针 , 通过 激活 (点 击 ) 它 , 可 以 方便 地 获取 新 的 网 页 ， 
这 也 是 超 文本 标记 语言 (HTML) 获 得 广泛 应 用 的 最 重要 的 原因 之 一 。 在 逻辑 上 将 视 为 
一 个 整体 的 一 系列 页 面 的 有 机 集合 称 为 网 站 (Website 或 Site)， 是 为 “网 页 创建 和 其 他 
可 在 网 页 浏览 器 中 看 到 的 信息 ”设计 的 一 种 标记 语言 。 本 书 全 面 揭示 了 HTML 和 层级 样 
式 表 (CSS) 的 秘密 ， 掌 握 了 这 些 秘诀 ， 就 可 以 创建 专业 级 的 交互 式 网 页 和 强大 的 应 用 
程序 ， 并 能 用 各 种 方式 随心 所 欲 地 与 Web 进行 交互 。 

本 书 是 “软件 工程 师 培养 从 书 ” 中 的 一 本 专业 基础 教材 ，“ 软 件 工程 师 培养 从 
书 ”是 由 武汉 厚 溥 信息 技术 有 限 公 司 开发 ， 以 培养 符合 企业 需求 的 软件 工程 师 应 用 
开发 、 实 施 为 目标 的 IT 职业 教育 从 书 。 在 开发 该 从 书 之 前 ， 我 们 对 IT 行业 的 岗位 
序列 做 了 充分 的 调研 ， 包 括 研究 从 业 人 员 技 术 方向 、 项 目 经 验 和 职业 素质 等 方面 的 
需求 ， 通 过 对 面向 学 生 的 特点 、 行 业 需求 的 现状 以 及 实施 等 方面 的 详细 分 析 ， 结 合 
“ 厚 溥 ”对 软件 人 才 培 养 模式 的 认 知 ， 按 照 软件 专业 总 体 定位 要 求 ， 进 行 软件 专业 
产品 课程 体系 设计 。 该 丛书 集 应 用 软件 知识 和 多 领域 的 实践 项 目 于 一 体 ， 着 重 培养 
学 生 的 熟练 度 和 规范 性 、 集 成 和 项 目 能 力 ， 从 而 达到 预定 的 培养 目标 。 

本 书 分 为 8 个 章节 : HTML 和 Dreamweaver 简介 ， 表 格 和 表单 ， 层 车 样式 表 ， 
CSS 网 页 布局 与 定位 , CSS 布局 和 HTML 列表 , 超 链接 伪 类 、 表 单 设 计 和 导航 菜单 ， 
模板 和 框架 ，CSS 布局 应 用 实例 解析 。 
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我 们 对 本 书 的 编写 体系 做 了 精心 的 设计 ， 按 照 “ 理 论 学 习 一 知识 总 结 一 上 机 操 
作 一 课 后 习题 ”这 一 思路 进行 编排 。“ 理 论 学 习 ” 部 分 介绍 通过 案例 要 达到 的 学 习 
目的 与 涉及 的 相关 知识 点 ， 使 学 习 目标 更 加 明确 ，“ 知 识 总 结 ” 部 分 概括 案例 所 涉 
及 的 知识 点 ， 使 知识 点 完整 系统 地 呈现 ; “上 机 操作 ”部 分 对 案例 进行 了 详尽 分 析 ， 
通过 完整 的 步骤 帮助 读者 快速 掌握 该 案例 的 操作 方法 ， “ 课 后 习题 ”部 分 帮助 读者 
理解 章节 的 知识 点 。 本 书 在 内 容 编写 方面 ， 力 求 细 致 全面 ; 在 文字 叙述 方面 ， 注 意 
言 简 意 凡 、 重 点 突出 ， 在 案例 选取 方面 ， 强 调 案 例 的 针对 性 和 实用 性 。 

本 书 凝 聚 了 编者 多 年 来 的 教学 经 验 和 成 果 ， 可 作为 各 类 高 等 院 校 、 高 职高 专 及 
培训 机 构 的 教材 ， 也 可 供 网 页 设计 与 制作 人 员 、 网 站 建设 与 开发 人 员 、 个 人 网 站 建 
设 爱好 者 阅读 。 

本 书 PPT 教学 课件 可 通过 http://www.tupwk.com.cn/downpage 下 载 。 

本 书 由 武汉 厚 溥 信息 技术 有 限 公司 组 编 ， 由 翁 高 飞 、 王 鹏 等 多 名 企业 实战 项 目 
经 理 编写 。 本 书 编者 长 期 从 事项 目 开 发 和 教学 实施 ， 并 且 对 当前 高 校 的 教学 情况 非 
常熟 悉 ， 在 编写 过 程 中 充分 考虑 到 不 同学 生 的 特点 和 需求 ， 加 强 了 计算 机 应 用 方面 
的 教学 。 本 书 在 编写 过 程 中 ， 得 到 了 武汉 厚 溥 信息 技术 有 限 公 司 各 级 领导 的 大 力 支 
持 ， 在 此 对 他 们 表示 衷心 的 感谢 。 

限于 编写 时 间 和 编者 的 水 平 , 书 中 难免 存在 不 足 之 处 , 希望 广大 读者 批评 指正 。 
服务 邮箱 : wkservice@163.com。 
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P 了 解 Internet 
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我 们 在 网 上 冲浪 时 ， 会 欣赏 到 很 多 制作 精美 的 网 页 ， 在 美 慕 的 同时 ， 你 想 亲 手 
制作 网 页 吗 ? 你 想 让 自己 制作 的 网 页 功能 更 强大 吗 ? 

HTML(HyperText Markup Language)， 即 “ 超 文本 标记 语言 ”， 就 是 制作 这 些 精 
美 网 页 的 基本 语言 。 所 谓 超 文本 ， 是 因为 它 可 以 加 入 图 片 、 声 音 、 动 画 、 影 视 等 内 
容 。 事实 上 , 每 一 个 HTML 文档 都 是 一 个 静态 的 网 页 文件 ,这 个 文件 里 包含 了 HTML 
间 令 代码 ， 这 些 指 令 代码 并 不 是 一 种 程序 语言 ， 它 只 是 一 种 排版 网 页 中 资料 显示 位 置 
的 标记 结构 语言 ， 易 学 易 懂 ， 非 常 简单 。HTML 的 普遍 应 用 带 来 了 超 文本 的 技术 一 一 
通过 单 击 筷 标 从 一 个 主题 跳 转 到 另 一 个 主题 ， 从 一 个 页 面 跳 转 到 另 一 个 页 面 ， 与 世 
界 各 地 主机 的 文件 链接 。 

HTML 是 一 种 应 用 于 网 页 文档 (文件 ) 的 标记 语言 , 用 它 编 写 的 文件 的 扩展 名 是 
“html” À “htm” , 可 以 使 用 IE 等 浏览 器 将 其 打开 。HTML 并 没有 严格 的 计算 机 
语法 结构 ， 因 此 HTML 语言 其 实 只 是 一 种 标识 符 ， 即 HTML 文件 是 由 HIML 标记 
符号 系统 组 成 的 代码 集合 。 

Dreamweaver 则 是 一 款 专 业 的 网 页 编辑 工具 ， 利 用 它 可 以 设计 网 页 、 开 发 网 站 ， 
并 可 编辑 Web 应 用 程序 。 


1.1 概述 


1. Internet 简介 


世界 各 地 的 个 人 计算 机 、 小 型 机 、 中 型 机 、 大 型 机 和 专用 服务 器 连接 在 一 起 ， 
形成 无 数 个 局 域 网 。 以 此 为 基础 ， 无 数 个 局 域 网 互相 连接 在 一 起 ， 成 为 一 个 全 球 性 
的 、 统 一 的 网 络 ， 这 就 是 Internet. 

Internet 中 的 WWW 网 ， 也 称 为 “环球 信息 网 ”或 “万 维 网 ”， 人 们 也 常 简称 
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为 3W， 外 国人 称 它 为 W3 或 Web， 它 是 在 因特网 上 检索 和 浏览 超 媒体 信息 的 一 种 
信息 查询 工具 。 所 谓 超 媒体 信息 ， 是 指 超 文本 和 多 媒体 信息 的 结合 ， 即 文本 、 声 音 、 
图 像 、 动 画 、 视 频 等 信息 。 

WWW 网 服务 器 都 安装 TCP/IP 协议 ， 服 务 器 上 的 所 有 信息 都 用 HTML( 超 文本 
标记 语言 ) 来 描述 ， 其 文档 由 文本 、 格 式 化 代码 以 及 与 其 他 文档 的 链接 组 成 。 其 中 
超 媒 体 链 接 使 用 的 是 URL( 统 一 资源 定位 器 )，URL 用 来 定位 检索 WWW 上 任何 地 
方 的 信息 资源 。 当 用 户 在 浏览 器 内 输入 网 址 后 ， 经 过 WWW 服务 器 计算 ， 网 页 的 
内 容 会 被 传送 到 用 户 的 计算 机 内 ， 由 浏览 器 将 这 些 内 容 翻 译 成 图 文 并 茂 的 网 页 。 
URL 的 第 一 部 分 一 般 为 “http:/”， 表 示 超 文本 传送 协议 ， 它 支持 超 媒 体 信息 的 传 
送 方 式 。URL 的 第 一 部 分 也 可 以 是 FTP, WAIS, Gopher, Telnet, BBS, News, 


E-mail，Whois 等 协议 。 

在 WWW 网上， 我 们 可 以 立即 把 全 球 任何 一 个 WWW 服务 器 上 的 信息 调 来 ， 
可 以 浏览 到 文本 、 图 像 、 声 音 、 动 画 等 信息 ， 不 仅 图 文 并 茂 ， 而 且 具 有 非常 友好 的 
用 户 操作 界面 和 查询 方式 。 在 WWW 网 上 , 用 户 操作 也 相当 简单 ， 只 要 会 使 用 鼠标 
即 可 浏览 ， 甚 至 用 鼠标 单 击 一 下 就 可 以 把 所 需 的 软件 、 文 本 、 图 像 、 声 音 、 动 画 、 
视频 等 信息 下 载 到 自己 的 计算 机 上 。 

正 是 由 于 有 了 万 维 网 和 超 链接 技术 ， 我 们 才能 轻 击 鼠 标 便 可 连接 到 全 世界 任何 
一 台 万 维 网 主机 ， 从 而 浏览 和 获取 无 穷 无 尽 的 信息 资源 。 正 因 如 此 ，Intemet 才 变 得 
如 此 神奇 。 


2. HTML 


19 世纪 70 年 代 ， 美 国 哈佛 大 学 的 学 生 Ted Nelson 提出 了 一 个 极 富 创造 性 的 构 
想 : 在 全 球 建立 一 个 信息 网 ， 在 这 个 信息 网 上 用 户 可 以 任意 地 选择 其 想 要 访问 的 信 
息 资源 ， 而 不 用 关心 这 些 信 息 的 来 源 。 为 此 ， 他 还 创建 了 一 个 术语 一 一 超 文 本 。 超 
文本 具有 极 强 的 交互 能 力 ， 用 户 只 需 单 击 文 本 中 的 字 或 词组 ， 便 可 激发 与 其 语意 相 
关 的 新 的 信息 流 。 因 为 超 文本 中 的 许多 字 或 词 都 具有 一 个 链接 将 其 指向 另 一 个 文本 ， 
而 后 仍 有 链接 指向 下 一 个 文本 ,所 以 只 凭借 词义 或 语意 的 关系 即 可 供 人 们 任意 浏览 。 


< 
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这 是 一 个 迈 向 新 技术 挑战 的 构想 ， 是 人 类 向 信息 社会 迈进 时 梦 襟 以 求 的 目标 。 
当年 的 构想 随 着 世界 计算 机 技术 的 飞速 发 展 ， 如 今 已 成 为 现实 。 

到 目前 为 止 ,HTML 已 经 发 展 到 了 比较 成 熟 的 HTML 4 版 本 (最 新 版 本 为 HTML 5), 
在 这 个 版 本 的 语言 中 ， 规 范 更 加 统一 ， 浏 览 器 之 间 的 兼容 性 也 更 加 完善 。 


1.2 HTML 的 文档 结构 


HTML 文档 均 用 于 在 浏览 器 上 显示 , 而 支持 HTTP 的 浏览 器 均 为 Windows 式 的 
图 形 用 户 接 口 (GUD 界 面 ， 因 此 ，HTML 文档 的 基本 结构 是 依据 这 一 要 求 而 设 定 的 。 
一 个 GUI 的 视窗 通常 由 标题 栏 和 窗口 体 作 为 其 最 基本 的 构成 ， 而 HTML 文档 结构 
的 “ 头 ” 和 “ 体 ” 正 应 于 这 一 要 求 。 

对 于 刚刚 接触 超 文本 的 朋友 ， 遇 到 的 最 大 障碍 就 是 一 些 用 “<” 和 “>” 括 起 来 
的 句子 ， 我 们 称 它 为 标签 ， 用 于 分 割 和 标识 文本 的 元 素 ， 以 形成 文本 的 布局 、 格 式 
及 五 彩 缤纷 的 画面 标签 通过 指定 某 块 信息 为 段落 或 标题 等 来 标识 文档 的 某 个 部 件 ， 
属性 是 标志 里 的 参数 的 选项 。HTML 的 标签 分 为 成 对 标签 和 单独 标签 两 种 ， 成 对 标 
签 由 首 标 签 < 标签 名 > 和 尾 标签 </ 标 签名 > 组 成 ， 成 对 标签 的 作用 域 只 作用 于 这 对 标 
签 中 的 文档 。 单 独 标签 的 格式 为 < 标签 名 >， 单 独 标签 在 相应 的 位 置 插入 元 素 即 可 。 

大 多 数 标签 都 有 自己 的 一 些 属性 ， 属 性 要 写 在 首 标签 内 ， 属 性 用 于 进一步 改变 
显示 的 效果 ， 各 属性 之 间 无 先后 次 序 ， 属 性 是 可 选 的 ， 属 性 也 可 以 省 略 而 采用 默认 
值 。 其 格式 如 下 : 


< 标签 名 属性 1= 属 性 值 1 属性 2= 属 性 值 2 ……> 


标签 、 属 性 不 区 分 大 小 写 。 

我 们 把 HTML 的 各 种 标记 符 放 在 “<>” 内 , 例如 <html>, 表示 该 文档 为 HTML 
文档 ; <html> 需 要 一 个 结束 标签 ， 即 </html>, 代表 该 HTML 文档 的 结束 。 在 <html> 
和 </html> 之 间 再 放 入 各 种 标签 , 如 <head> 标 签 、<body> 标 签 等 , 这 样 就 组 成 了 网 页 。 
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1.2.1 头 部 <head>...</head> 


大 家 都 学 过 英语 ， 一 定 知道 “ 头 ”的 英文 单词 是 什么 。head， 没 错 ， 在 HTML 
， 我 们 也 是 用 head 来 表示 文档 的 头 部 ， 即 <head>...</head>。 
<head> 标 签 对 中 可 以 包含 文档 的 标题 、 文 档 使 用 的 脚本 、 样 式 定义 和 文档 名 信 
息 。 浏 览 器 希望 从 头 部 找到 文档 的 补充 信息 。 此 外 ，<head> 标 签 对 还 可 以 包含 搜索 
工具 和 索引 程序 所 需 的 其 他 信息 的 标志 。 头 部 位 于 <html> 和 </html> 之 间 。 
例如 : 


Hm 
HE 


标签 对 是 一 层 一 层 谋 套 的 ,各 个 标签 对 不 能 交 又 放置 .对 于 标准 HTML 
来 说 , 最 外 面 一 层 是 <html> 和 </html> 标 答对 , 其 他 标签 对 应 放 在 它们 之 间 。 


1.2.2 标题 <title>...</title> 


不 知道 大 家 有 没有 注意 到 浏览 器 窗口 最 上 边 显示 的 文本 信息 ， 那 些 信 息 一 般 是 
网 页 的 “主题 ”。 它 通常 会 对 当前 网 页 做 一 个 整体 描述 , 说 明 当 前 网 页 的 具体 内 容 。 
眼睛 是 心灵 的 窗户 ， 对 于 一 个 网 页 来 说 ， 它 的 眼睛 就 是 网 页 标题 (如 图 1-1 所 示 )， 它 
显示 在 网 页 标题 栏 上 。 


1-1 网 页 标题 视图 


“s 
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标题 用 英语 怎么 说 呢 ?title， 对 了 。 同 大 家 一 样 ， 网 页 的 眼睛 也 是 长 在 头 部 的 。 
在 <title> 标 签 对 内 部 放 入 你 想 要 看 到 的 文字 ， 这 样 我 们 就 能 随意 操纵 标题 栏 的 内 容 
了 。 如 : 


<html> 

<head> 
<title> 你 好 啊 </title> 

</head> 

</html> 


打开 记事 本 ， 写 入 上 面 的 代码 ， 另 存 为 hello.html， 然 后 双击 这 个 网 页 文件 ， 即 
可 看 到 标题 栏 上 显示 的 正 是 我 们 写 在 <title> 标 签 中 的 内 容 ， 效 果 如 图 1-2 所 示 。 


< e. Og Qm aema gas Q| " 
地 址 (D) [E] ents and Settingstadministrator UR ihelo hm =] ORA 链接 ” 


图 1-2 ”<title> 标 签 效果 图 


.2.3 元 标签 <meta> 


在 <head> 标 签 对 内 部 还 可 以 嵌 套 另 一 个 重要 标签 : <meta>( 即 META 标签 或 元 标 
签 )。<meta> 标 签 用 来 描述 HTML 网 页 文档 的 属性 ， 例 如 作者 、 日 期 和 时 间 、 网 页 
描述 、 关 键 词 、 页 面 刷新 等 。 如 : 


<meta http-equiv="Content-Type" content="text/html: charset=gb2312"> 


其 作用 是 指定 当前 文档 所 使 用 的 字符 编码 为 gb2312， 也 就 是 中 文 简体 字符 。 根 
据 这 一 行 代码 ， 浏 览 器 就 可 以 识别 出 这 个 网 页 应 该 用 中 文 简体 字符 显示 。 类 似 地 ， 
如 果 将 gb2312 蔡 换 为 jg5， 那 么 网 页 就 会 以 中 文 繁体 的 格式 解释 代码 并 显示 。 
顾名思义 ，http-equiv 相当 于 http 文件 的 头 ， 可 以 直接 影响 网 页 的 传输 ， 用 


于 向 浏览 器 提供 一 些 说 明 信 息 , 浏览 


器 会 根据 这 些 说明 做 出 相应 处 到 


E。 如 设置 页 
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<meta http-equiv="refresh" content="60"> 


该 网 页 将 会 每 60 秒 钟 自动 刷新 一 次 。 
若 设置 页 面 在 一 分 钟 后 跳 转 到 搜狐 网 ， 则 为 : 


<meta http-equiv="refresh" content="60;url=http://www.sohu.com"> 


1.3 Dreamweaver 简介 


Adobe Dreamweaver CS4 是 一 款 专业 的 HTML 编辑 器 ， 用 于 设计 、 编 码 ， 开 发 
网 站 、 网 页 和 Web 应 用 程序 。 

利用 Dreamweaver 中 的 可 视 化 编辑 功能 , 可 以 快速 地 创建 页 面 而 无 需 编写 任何 代码 ; 
可 以 查看 所 有 站 点 元 素 或 资源 并 将 它们 从 易于 使 用 的 面板 直接 拖 上 忠 到 文档 中 ， 可 以 在 
Fireworks 或 其 他 图 形 应 用 程序 中 创建 和 编辑 图 像 ， 然 后 将 它们 直接 导入 Dreamweaver， 
或 者 添加 Flash 对 象 ， 从 而 优化 开发 工作 流程 。 

Dreamweaver 还 提供 了 功能 全 面 的 编码 环境 ， 其 中 包括 代码 编辑 工具 (例如 代码 
颜色 和 标签 完成 )) 有 关 HIML、 层 县 样式 表 (CSS)、JavaScript、ColdFusion 标记 语 
言 (CFML)、Microsoft Active Server Pages(ASP) 和 Java Server Pages(JSP) 的 参考 资料 
和 JavaScript 代码 的 智能 提示 。Dreamweaver 可 自由 导入 导出 HTML 技术 ， 可 导入 
手工 编码 的 HTML 文档 而 不 会 重新 设置 代码 的 格式 , 可 以 随后 用 首选 的 格式 设置 样 
式 来 重新 设置 代码 的 格式 。 

Dreamweaver 还 可 以 使 用 服务 器 技术 (例如 CFML, ASP.NET, ASP, JSP 和 PHP) 
生成 由 动态 数据 库 支 持 的 Web 应 用 程序 。 

Dreamweaver 可 以 完全 自 定 义 。 可 以 创建 自己 的 对 象 和 命令 、 修 改 快捷 键 ， 甚 至 编 
写 JavaScript 代码 ， 用 新 的 行为 、 属 性 检查 器 和 站 点 报告 来 扩展 Dreamweaver 的 功能 。 
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总 而 言 之 ，Dreamweaver 几乎 可 以 满足 用 户 对 网 页 编辑 及 站 点 管理 所 需 的 各 种 


功能 ， 是 一 款 非 常 专业 的 网 页 制作 工具 。 


1.4 Dreamweaver CS4 的 界面 


用 户 可 以 通过 选择 “开始 ”|“ 程 序 ”| Adobe Dreamweaver CS4 命令 来 启动 


Dreamweaver， 将 会 出 现 如 图 1-3 所 示 的 界面 。 
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图 1-3 Dreamweaver CS4 界面 


插入 菜单 


插入 菜单 主要 用 于 在 网 页 中 插入 元 素 ， 如 文本 框 、 图 像 、 视 频 等 ， 如 图 1-4 所 


。 我们 在 学 习 的 过 程 中 使 用 频率 最 高 的 就 是 插入 菜单 。 
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1-4 插入 菜单 的 菜单 项 
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142 属性 检查 器 


插入 到 页 面 中 的 所 有 对 象 (包括 文本 、 图 像 、 表 格 和 水 平 线 ) 都 具有 相应 的 某 些 
属性 。 位 于 屏幕 左下 角 的 窗口 称 为 属性 检查 器 。 属 性 检查 器 用 来 给 文本 、 图 像 、 表 
格 等 对 象 设置 属性 。 

通常 , 属性 检查 器 (如 图 1-5 所 示 ) 的 选项 右 侧 有 一 个 小 箭头 ， 指 示 包 含 更 多 选项 。 
单 击 此 箭头 时 ， 将 显示 这 些 属 性 。 
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图 1-5 属性 检查 器 
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1.5 ”新建 网 站 


Dreamweaver 具有 许多 功能 ,可 以 管理 站 点 并 将 文件 传输 至 远程 服务 器 以 及 从 远 


.9. 
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程 服务 器 传输 文件 。 假 如 网 站 需要 通过 建立 本 地 站 点 来 创建 ，Dreamweaver 有 助 于 整 
理 和 管理 站 点 文件 。 


1.5.1 建立 本 地 站 点 


做 网 站 的 第 一 步 就 是 新 建站 点 ， 所 以 站 点 的 规划 很 重要 ， 那 么 到 底 什 么 是 站 点 
呢 ? 严格 来 说 ， 站 点 也 是 一 种 文档 的 磁盘 储存 形式 ， 它 同样 是 由 文档 和 文档 所 在 的 
文件 夹 组 成 的 。 也 就 是 说 ， 如 果 我 们 把 一 个 网 站 里 所 有 的 页 面 和 图 片 等 其 他 与 本 网 
站 有 关 的 内 容 放 在 一 个 文件 夹 里 ， 那 么 这 个 文件 夹 就 成 为 站 点 。 

用 户 在 Internet 上 所 浏览 的 各 种 网 站 , 归根 结 底 就 是 用 浏览 器 打开 存储 于 Internet 
服务 器 上 的 HTML 文档 及 其 他 相关 资源 。 基 于 Internet 服务 器 的 不 可 知 特性 ， 用 户 
通常 将 存储 于 Internet 服务 器 上 的 站 点 和 相关 文档 称 作 远 端 站 点 或 远程 站 点 。 

利用 Dreamweaver 可 以 对 Internet 服务 器 上 的 站 点 文档 直接 进行 编辑 和 管理 ， 
但 这 在 很 多 时 候 非常 不 方便 ， 很 多 因素 都 会 对 编辑 和 管理 操作 造成 影响 ， 例 如 ， 网 
络 速度 和 网 络 的 不 稳定 性 等 。 

BEŽA Internet 服务 器 上 的 站 点 仍然 是 以 文件 和 文件 夹 作 为 基本 要 素 的 磁盘 储存 形 
式 ， 那么， 在 这 种 情况 下 ， 用 户 会 考虑 ， 能 不 能 先 在 本 地 计算 机 的 磁盘 上 构建 出 整个 
网 站 的 框架 ， 编 辑 相应 的 文档 ， 然 后 再 将 其 放置 到 Internet 服务 器 上 呢 ? 回答 是 肯定 
的 ， 这 就 是 本 地 站 点 的 概念 。 

利用 Dreamweaver， 用 户 可 以 在 本 地 计算 机 上 构建 出 站 点 的 框架 ， 从 整体 上 对 
站 点 进行 全 局 把 握 。 由 于 这 时 候 没 有 同 Intemet 连接 ， 因 此 ， 有 充裕 的 时 间 来 完成 
站 点 的 设计 、 进 行 完善 的 测试 。 当 站 点 设计 完毕 ， 可 以 利用 各 种 上 传 工 具 ， 将 本 地 
站 点 上 传 到 Internet 服务 器 上 ， 形 成 远 端 站 点 。 

既然 本 地 站 点 这 么 重要 ， 那么 下 面 我 们 就 来 学 习 一 下 如 何在 Dreamweaver 中 创 
建 本 地 站 点 。 假 设 现 在 建立 一 个 个 人 网 站 的 站 点 ， 取 名 为 “我 的 站 点 ”， 要 开始 建 
立 这 个 站 点 ， 请 在 计算 机 的 硬盘 驱动 器 EE 盘 中 创建 名 为 “myweb” 的 文件 夹 ， 该 文 
件 夹 为 “我 的 站 点 ”的 本 地 根 文件 夹 ， 所 有 与 本 网 站 相关 的 页 面 和 图 片 等 都 放 在 该 
文件 夹 里 ， 为 了 规范 ， 最 好 在 “myweb ”文件 夹 里 再 新 建 一 个 名 为 “image” 的 文件 
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夹 ， 将 与 该 网 站 相关 的 所 有 图 片 都 放 在 此 文件 夹 里 。 

现在 我 们 就 开始 定义 “我 的 站 点 ”站 点 。 

(1) 选择 菜单 中 的 “站 点 ”|“ 新 建站 点 ”命令 ， 将 显示 “站 点 定义 ”对 话 框 ， 
如 图 1-6 所 示 。 


未 命名 站 点 1 的 站 点 定义 为 


1-6 “站 点 定义 ”对 话 框 


(2) 该 对 话 框 默 认 显示 的 是 “基本 ”选项 卡 ， 我 们 直接 切换 到 “高 级 ”选项 卡 
来 编辑 该 站 点 ， 单 击 该 对 话 框 上 的 “高 级 ”按钮 ， 将 出 现 如 图 1-7 所 示 的 对 话 框 。 

(3) 在 该 对 话 框 的 “分 类 ”选项 中 选择 “本 地 信息 ”。 

(4) 在 “站 点 名 称 ” 栏 中 输入 “我 的 站 点 ”。 

(5) 单 击 “ 本 地 根 文件 夹 ” 栏 后 面 的 文件 夹 图 标 ， 选 择 存储 网 页 的 根 文件 夹 ， 
即 前 面 在 三 盘 所 设计 好 的 myweb 文件 夹 。 

(6) 因为 现在 我 们 所 编辑 的 是 本 地 站 点 ， 所 以 其 他 选项 使 用 默认 ， 编 辑 完成 后 
如 图 1-8 所 示 。 

(7) 单 击 “ 确 定 ”按钮 ， 则 该 站 点 已 编辑 成 功 。 

此 时 ， 在 屏幕 右边 的 “文件 ”面板 中 已 生成 了 一 个 名 称 为 “我 的 站 点 ”的 站 点 ， 
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如 图 1-9 所 示 。 
定义 站 点 时 ， 计 算 机 并 不 会 发 生 很 大 的 变化 。 该 站 点 不 会 自动 新 建 任何 文件 夹 
或 首页 ， 所 以 下 面 就 来 学 习 一 下 如 何 新 建 页 面 。 


未 命名 站 点 1 的 站 点 定义 为 


sa ue =u: wa 
FRAR: P AERE D 
Bumen SS o 
链接 相对 于 - C EY C 站 点 根 目录 G) 


Ei 


区 分 大 小 写 的 链接 - 厂 使 用 区 分 大 小 写 的 链接 检查 QD 


aF ç 启用 缓存 E) 


SEURI 


图 1-7 “高 级 ”选项 卡 对 话 框 


本 地 信息 


HASBRO: [EAE 
PARLER: PENE ë Y 
pumexero f Žž D 
RENFE C 站 点 根 目录 G 
e stt: uw A 


niya sg 


区 分 大 小 写 的 链接 - 厂 使 用 区 分 大 小 写 的 链接 检查 QD 
sar 


图 1-8 “我 的 站 点 ”的 站 点 定义 对 话 框 


. 12。 


& a ©, 
第 1 章 HTML 4 Dreamweaver 简介 > 


多 


CESA | [本 地 视图 z] 
&c|s%z> 4 6e|B 


e Bs. 
1-9 定义 的 “我 的 站 点 ”的 站 点 


1.5.2 ”新 建 页 面 


设置 本 地 站 点 后 ， 可 以 选择 菜单 栏 中 的 “文件 ”| 新建” 命令 来 新 建 一 个 页 面 ， 
此 时 会 出 现 如 图 1-10 所 示 的 对 话 框 ， 可 以 直接 使 用 默认 值 ， 就 可 以 新 建 一 个 静态 页 
j， 所 以 直接 单 击 “ 创 建 ” 按 钮 ， 就 会 生成 一 个 名 为 Untitled-1.htm 的 页 面 。 


TERN. 
=- m 
Beon = jm 模板 
< sgm 
国 空 模板 > on 
= mma FAR 
B mesan |F iise 
= Jorserip 
ES anonn = w 
E ASP JavaScript 
PEN pora 
D ASP.NET C# 
D ASP. NET VB 
E ColdFusion 
D caruia a ETML 10 Transitional 
2 tem. [emea 
- 
ano | mero.. Demo ] mo | 


图 1-10 新 建文 档 界面 


Dreamweaver 是 一 种 “所 见 即 所 得 ”的 可 视 化 界面 ， 在 常用 工具 栏 下 有 3 个 按 
钮 : 回 三 |、 国 本 | 和 [ 国 夺 |， 分别 为 代码 视图 、 拆 分 视图 和 设计 视图 。 代 码 视 图 是 
HTML 代码 的 编辑 器 ， 设 计 视 图 是 使 用 工具 实现 网 页 ， 设 计 视图 和 代码 视图 是 相 辅 
相 成 的 ， 每 在 设计 视图 里 操作 一 步 ， 代 码 视 图 就 会 生成 相应 的 HTML 代码 ， 同 样 ， 
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在 代码 视图 中 编写 了 HTML 代码 , 设计 视图 也 会 生成 相应 的 界面 。 拆 分 视图 既 显示 
代码 视图 也 显示 设计 视图 。 新 建 一 个 页 面 后 ， 在 代码 视图 里 会 自动 生成 网 页 基本 框 
架 结 构 的 HTML 代码 。 
选择 “文件 ” |“ 保存” 命令， 将 此 页 面 保 存 并 命名 为 index.htm( 即 首页 的 意思 )。 
如 果 想 在 浏览 器 中 浏览 该 页 面 , 则 可 以 选择 “文件 ”| 在 浏览 器 中 预览 ”| iexplore 
命令 或 按 F12 键 。 


1.6 HTML 基本 标签 


在 网 页 创作 中 ， 文 字 是 最 基本 的 元 素 之 一 。 是 否 能 够 合理 地 把 文字 的 大 小 、 颜 
色 等 设置 好 ， 会 直接 影响 浏览 者 对 网 站 的 印象 。 本 节 将 讲解 HTML 的 常见 标签 。 


1.6.1 ”标题 标签 


在 浏览 网 页 时 ， 常 常会 看 到 一 些 标题 文字 ， 用 于 对 文本 中 的 章节 进行 划分 ， 它们 
以 固定 的 字号 显示 。 标 题 能 分 割 大 段 文字 ， 概 括 下 文 内 容 ， 根 据 逻 辑 结构 安排 信息 。 
HTML 提供 了 六 级 标题 ，<h1> 最 大 ，<h6> 最 小 , 用 户 只 需 把 文字 放 入 这 些 标签 
由 浏览 器 负责 显示 ， 如 下 所 示 。 


示例 1-1: 


= 


<html> 

<head> 
<title> 标 题 标签 </title> 

</head> 

<body> 
<hl1> 今 天 天 气 不 错 </hl1> 
<h2> 今 天 天 气 不 错 </h2> 
<h3> 今 天 天 气 不 错 </h3> 
<h4> 今 天 天 气 不 错 </h4> 
<h5> 今 天 天 气 不 错 </h5> 
<h6> 今 天 天 气 不 错 </h6> 
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</body> 
</html> 


效果 如 图 1-11 所 示 。 


今天 天 气 不 错 


今天 天 气 不 错 
今天 天 气 不 错 


今天 天 气 不 错 
今天 天 气 不 错 


今天 天 气 不 错 


BE CT Scere 


图 1-11 标题 标签 效果 图 
需要 注意 的 是 ， 每 个 标题 独占 一 行 ， 也 就 是 说 一 行文 字 里 面 只 能 有 一 种 标题 。 
1.6.2 ”段落 级 标签 


在 网 页 中 要 想 把 文字 有 条 理 地 显示 ， 离 不 开 段落 标记 。 在 HTML 中 ， 段 落 使 用 
<p> 和 </p> 来 表示 。 

<p></p> 标 记 对 用 于 创建 一 个 段落 ， 在 此 标记 对 之 间 加 入 的 文本 将 按照 段落 的 
格式 显示 在 浏览 器 上 。 另 外 ，<p> 标 记 还 可 以 使 用 align 属性 ， 用 于 说 明 对 齐 方式 ， 
语法 是 : <p align=""></p>。align 可 以 是 Left( 左 对 齐 )、Center( 居 中 ) 和 Right( 右 对 齐 )3 
个 值 中 的 任何 一 个 。 如 <p align="Center"></p> 表 示 标 记 中 的 文本 使 用 居中 的 对 齐 方 
式 ， 如 下 所 示 。 


示例 1-2: 


<html> 
<head> 
<title> 段 落 标签 </title> 
</head> 
<body> 
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<p align="center"> 诗经 国 风 ， 拖 风 ， 凯 风 </p> 

<p align="center"> AÉ H, KEO. WORK FRW. </p> 
<p align="center"> HAHH, KERI. IRZF, RESA. </p> 
<p align="center" > RARE? 在 浚 之 下 。 有 子 七 人 ， 母 氏 劳苦 。 </p> 
<p align="center"> RRRS, RERS. ATEA, RERO. </p> 
</body> 

</html> 


效果 如 图 1-12 所 示 。 


文件 四 SEO SEV KEU IAV WHW 

Q= - O: 3 2 @| D=e km @| @- `> 
诗经 . 国 风 。 椰 风 凯 风 

HARAR, KEM. MORR, BRUR 

NAAR, KEM SREE, RESA 

RARE 在 兆 之 下 。 有 子 七 人 ， 母 氏 劳苦 。 

RRRS, RERE. AFEA RED, 


加 
Cmte 
图 1-12 段落 标签 效果 图 
EC AEN ALA ' 
结束 标签 </p> 可 以 不 写 。 下 一 个 <p> 标 签 的 出 现 ， 就 意味 着 上 一 个 <p> 


1.6.3 ”换行 标签 


换行 标记 用 <br> 来 表示 ， 它 没有 结束 标记 。 它 与 段落 标记 的 区 别 在 于 它 仅 表示 
换行 ， 但 是 上 下 两 行 仍然 为 一 个 段落 。 例 如 ， 将 上 面 的 例子 修改 为 如 下 所 示 。 

示例 1-3: 

<html> 

<head> 

<title> 换 行 标签 </title> 

</head> 

<body> 
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<p> 诗 经 。 国 风 。 抑 风 。 凯 风 </p> 

WAAR, KEO. WLRR FRH. <br> 
WARAH, KEH. FRAS, RESA. <b> 
ZARE? 在 浚 之 下 。 有 子 七 人 ， 母 氏 劳苦 。<br> 
如上 晓 黄 鸟 ， 载 好 其 音 。 有 子 七 人 ， 莫 慰 母 心 。<br> 
</body> 

</html> 


效果 如 图 1-13 所 示 。 


XPO KEO SEV 收藏 和 ) IRV WHW 
Om- O A Du k OB 
FEE AREA 


IRAR, MR. MOER, BRWS 
MAAR, RMS. ， 我 无 令 人 。 
ZARR ARZT. ATEA, BRAS. 
RRES, RERE. AFEA, MURO. 


[ | Í Í | [Jn Copter 
图 1-13 换行 标签 效果 图 


从 图 1-12 和 图 1-13 可 以 看 出 段落 标签 和 换行 标签 之 间 的 区 别 。 
1.6.4” 预 排版 标记 


在 网 页 创作 中 ， 一 般 是 通过 各 种 标记 对 文字 进行 排版 的 。 但 是 在 实际 运用 中 ， 
经 常 需要 一 些 特殊 的 排版 效果 ， 这 样 使 用 标记 控制 起 来 往往 比较 麻烦 。 解 决 办 法 就 
是 保留 文本 格式 的 排版 效果 ， 例 如 空格 、 制 表 符 等 。 如 果 要 保留 原始 的 文本 排版 效 
果 ， 则 需要 使 用 <pre> 标 记 。 

在 <pre> 与 </pre> 之 间 的 文本 在 浏览 器 中 生成 的 效果 将 会 和 我 们 编写 时 制定 的 
格式 完全 一 样 。 如 需 实现 页 面 原来 的 效果 ， 使 用 <pre> 标 签 会 变 得 很 方便 。 

示例 1-4: 


<html> 
<head> 
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< 


<title>pre 预 排版 标签 </title></head> 


<body> 
SP 
o 
o oo 
00 oo 
oo oo 
oo oo 
00000 00 
oo o0 
ooo oooo 
</pre> 
</body> 
</html> 


保存 后 的 打开 效果 如 图 1-14 所 示 。 


ET TT = 
XO REO 查看 WD KEA IAW #hQ) 


Q=- Q - iz) (2) @; | pr wa O| 
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图 1-14 ”<pre> 预 排版 标签 效果 图 


1.6.5 文本 格式 化 标签 


在 网 页 中 ， 除 了 标题 文字 外 ， 普 通 的 文字 信息 更 是 不 可 缺少 的 ， 而 各 种 各 样 的 
文字 效果 可 以 使 网 页 更 丰富 多 彩 。 

在 编辑 网 页 时 ， 可 以 直接 在 <body> 和 </body> 之 间 输 入 文字 ， 这 再 简单 不 过 了 。 
但 是 这 样 做 完 的 网 页 ， 浏 览 起 来 混乱 不 堪 : 文字 不 分 段落 ， 也 没有 多 彩 的 颜色 。 所 
以 ， 输 入 好 文字 后 ， 还 要 对 文字 进行 格式 化 。 
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1. <b> 标 签 

<b> 标 签 可 以 使 文字 以 粗 体形 式 显 示 ， 如 : 
<b> 该 文本 将 以 粗 体 显示 </b> 

2. <i> 标 签 

<i> 标 签 可 以 使 文字 以 斜体 形式 显示 ， 如 : 
<i> 该 文本 将 以 斜体 显示 </i> 


3. <u> 标 签 
<u> 标 签 可 以 使 其 内 部 文字 加 上 下 划 线 ， 如 : 


<u> 该 文本 将 以 下 划 线 显示 </u> 


4. <sup> 标 签 
<sup> 标 签 可 以 使 其 内 部 的 文字 比 前 方 的 文字 高 一 些 ,并 以 更 小 的 字体 显示 。 如 : 


欢迎 <sup> 光 临 </sup> 


5. <sub> 标 签 
<sub> 标 签 可 以 使 其 内 部 的 文字 比 前方 的 文字 低 一 些 , 并 以 更 小 的 字体 显示 。 如 : 
欢迎 <sub> 光 临 </sub> 


下 面 演示 这 些 文本 格式 化 标签 的 效果 。 


示例 1-5: 


<html> 

<head> 
<title> 文 本 格式 化 标签 </title> 

</head> 

<body> 


<p> 
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< 


<b> 国 风 周南 汉 广 </b></p> 
<p> 
南 有 乔木 ， 不 可 <u> 休 息 </u>。</p> 
<p> 
汉 有 游 女 ， 不 可 < 记 求 思 </i>。</p> 
<p> 
汉 之 <sub> 广 侨 </sub>， 不 可 <sup> 泳 思 </sup>。</p> 
<p> 
江 之 永和 括 ， 不 可 方 思 。</p> 
</body> 
</html> 


效果 如 图 1-15 所 示 。 


当 文 本 格式 化 标签 - Bi o: 
XO REO SEV KEW IAW #HW 


O= - O - ix) 12) @; | Dua um @| 
国 风 周南 汉 广 

南 有 乔木 ， 不 可 休息 。 

DARS, TIRE 


Reg TTE, 


江 之 永 锋 ， 不 可 方 思 。 
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图 1-15 文本 格式 化 标签 效果 图 


1.6.6 列表 


列表 用 于 按 逻 辑 方式 对 数据 分 组 。 常 用 的 列表 有 三 种 : 
° EFIK 

e 有 序列 表 

° 自 定义 列表 

1. 无 序列 表 (unordered list) 


所 谓 “ 无 序列 表 ”， 当 然 是 指 各 条 列 间 并 无 顺序 关系 ， 纯 粹 只 是 利用 条 列 式 方 
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法 来 呈现 资料 而 已 ， 此 种 无 序 标签 ， 在 各 条 列 前 面 均 有 一 符号 以 示 区 阳 。 无 序列 表 
使 用 <ul> 标 签 来 创建 ， 用 <li> 表 示 列 表 中 的 每 一 项 ， 如 下 所 示 。 


示例 1-6: 


<html> 
<head> 
<title> 无 序列 表 </title> 
</head> 
<body> 
国际 互联 网 提供 的 服务 有 : 
<ul> 
<li>WWW 服务 </li> 
<l 记 文件 传输 服务 </li> 
<li> FARRS </li> 
<1i> 远 程 登录 服务 </li> 
<li> 其 他 服务 </li> 
</ul> 
</body> 
</html> 


效果 如 图 1-16 所 示 。 


XPO REO SEV BRW IAD HU | & 
Qm- O-A b| O mm ym — " um” 
国际 互联 网 提供 的 服务 有 ， E 


。WWW 服 务 
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图 1-16 无 序列 表 标签 效果 图 


前 面 的 符号 一 定 是 要 圆 形 的 吗 ? 不 , 我 们 可 以 加 入 type=" 形 状 名 称 "属性 来 改变 
其 符号 形状 ， 共 有 3 个 选择 : 
e disc( 实 心 圆 ) 


e square( 小 正方 形 加 
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e circle( 空 心 圆 o) 
下 面 对 示 例 1-6 做 一 些 改动 ， 以 改变 外 观 : 
<ul type="circle"> 


效果 如 图 1-17 所 示 ， 看 看 发 生 了 什么 变化 ? 


XED RED FEV KAW IAV HHW | z 
Om ©O m 2] O| Ous y a 
国际 互联 网 提供 的 服务 有 ， 


o WWW 服 务 

o 文件 传输 服务 
° 电子 邮件 服务 
° 远程 登录 服务 
o 其 他 服务 
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图 1-17 无 序列 表 符 号 改变 效果 图 


可 以 发 现 每 一 行 的 符号 变 成 了 空心 圆 。 
也 可 以 修改 列表 中 每 一 项 的 样式 ， 只 需 对 <li> 添 加 相应 的 type 属性 即 可 。 


2. 有 序列 表 (ordered list) 


“有 序列 表 ” 是 指 各 条 列 之 间 是 有 顺序 的 ， 从 1、2、3… 一 直 延 伸 下 去 。 有 序 
列表 用 <ol> 来 标记 ， 列 表 中 的 每 一 项 用 <li> 来 标记 。 

和 无 序列 表 标 签 一 样 ， 我 们 也 可 以 选择 不 同 的 符号 来 显示 顺序 ， 一 样 是 用 type 
属性 来 更 改 ， 共 有 5 种 符号 : 

° 1( 数 字 ) 

° A( 大 写 英文 字母 ) 

° a( 小 写 英文 字母 ) 

° I( 大 写 罗 马 数字 ) 

e i 小写 罗马 数字 ) 
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示例 1-7: 


<html> 
<head> 
<title> 有 序列 表 </title> 
</head> 
<body> 
国际 互联 网 提供 的 服务 有 : 
<oltype="1"> 
<li>WWW 服务 </li> 
<l 记 文件 传输 服务 </li> 
<li> FARRS </i> 
<l 记 远程 登录 服务 </li> 
<l 记 其 他 服务 </li> 
</ol> 
</body> 
</html> 


显示 效果 如 图 1-18 所 示 。 


ET 查看 四 == IAD #hQD) 
GT OA A Ale vroa 
国际 互联 网 提供 的 服务 有 


WWW 服 务 
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图 1-18 有 序列 表 标 签 效果 图 


如 果 要 把 所 有 或 部 分 项 目 编号 显示 为 大 写 罗 马 数字 ， 只 需要 修改 <ol> 或 <li> 的 
type 属性 值 为 : I。 

也 可 以 改变 第 一 行 的 编号 值 , 只 需 添加 start 属性 。 例 如 , 把 上 例 中 的 <ol type="1"> 
改 为 : 

<ol type="1" start ="11"> 


再 来 观看 网 页 ， 会 发 现 每 一 项 的 编号 变 成 了 11、12……。 
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3. 自 定义 列表 (definition list) 


自 定 义 列 表 用 于 对 列表 条 目 进 行 简 短 说 明 , 用 <dl> 开 始 , 列表 条 目 用 <dt> 引 导 ， 
说 明 用 <dd> 引 导 。 如 示例 1-8 所 示 。 


示例 1-8: 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 测 试 </title> 
</head> 
<body> 
<dl> 
<d>WWW 
<dd>World Wide Web， 万 维 网 
<dt>URL 
<dd>Uniform Resource Locations， 统 一 资源 定位 符 
<dt>HTTP 
<dd>Hyper Text Mark-up Language， 超 文本 标记 语言 
</d> 
</body> 
</html> 


效果 如 图 1-19 所 示 。 


文件 EE) RED SEV KAW IAV 帮助 只 


World Wide Web， 万 维 网 
Uniform Resourse Locations， 统 一 资源 定位 符 


Hyper Text Mark-up Language， 超 文本 标记 语言 


[ L Í Í Í [J hyCcoepste 
图 1-19 自 定 义 列表 测试 效果 图 


各 种 列表 之 间 可 以 互相 嵌 套 , 每 嵌 套 一 层 , 列表 条 目的 输出 就 会 有 更 大 的 缩 进 。 
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167 ”设置 文本 字体 
<font> 标 签 可 以 用 来 给 字体 设置 字体 、 大 小 、 颜 色 等 。 使 用 方法 : 
<font color=" " size=" " face=" "> 文字 内 容 </font>。 


size 属性 值 一 共有 7 种 ， 从 <font size=1>( 最 小 ) 到 <font size=7>( 最 大 )。 另 外 ,还 
有 一 种 写法 : <font size=+1> 文 字 内 容 </font>， 其 意 为 : 比 预 设 字 大 一 级 ， 当 然 也 可 
以 写 为 : font size=+2( 比 预 设 字 大 二 级 )， 或 是 font size=-1( 比 预 设 字 小 一 级 )。 一 般 
而 言 ， 预 设 字 体 为 3。 

若 要 给 字体 设置 颜色 ， 需 要 使 用 font 标签 的 color 属性 ，color 值 可 以 是 英文 颜 
色 单 词 或 者 十 六 进 制 数值 。 

face 属性 可 以 给 文字 设置 字体 ， 但 前 提 是 浏览 者 要 安装 了 这 种 字体 ， 否 则 将 以 
浏览 者 系统 上 的 默认 字体 显示 。 

示例 1-9: 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 测 试 </title> 

</head> 

<body> 

<p> 

<font size="1"> 字 体 一 </font> <font size="-2"> 字体 一 </font> 
<p> 

<font size="2"> 字 体 二 </font> <font size="-1"> 字体 二 </font> 
<p> 

<font size="3"> 字 体 三 </font> <font size="+0"> 字体 三 </font> 
<p> 

<font size="4"> 字 体 四 </font> <font size="+1"> 字体 四 </font> 
<p> 

<font size="5"> 字 体 五 </font> <font size="+2"> 字体 五 </font> 
<p> 

<font size="6"> 字 体 六 </font> <font size="+3"> 字体 六 </font> 
<p> 

<font size="7" color="#0000FF"> 字 体 七 </font> 

<font size="+4" color="blue" face=" 隶 书 "> 字体 七 </font> 
</body> 

</html> 
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示例 用 1-9 两 种 方式 设置 了 字体 大 小 ， 将 “字体 七 ”的 颜色 设置 为 蓝 色 ， 并 给 
最 后 一 个 “字体 七 ”设置 了 隶书 字体 ， 效 果 如 图 1-20 所 示 。 


za) IAD 帮助 0 


Qe -O-A h | Os vm O| 


şt- st- 


字体 二 字体 二 
字体 三 字体 三 
字体 四 字体 四 


字体 五 字体 五 
字体 六 字体 六 
字体 七 字体 七 


EEEE ENTE; 
1-20 文本 字体 标签 测试 效果 图 


g 


<font> 标 签 虽然 可 以 控制 文本 的 大 小 、 颜 色 ， 但 局 限 性 太 大 ， 例 如 ， 只 能 把 文 
字 大 小 分 为 7 个 等 级 。 在 实际 运用 中 ,一般 都 是 通过 css 样式 表 来 实现 对 文本 的 控 
制 ( 见 本 书 第 6 章 )。 


1.6.8 HARA 


在 网 页 中 也 可 以 随意 插入 图 片 ， 需 要 使 用 的 标签 为 : <img>。 
<img> 标 签 的 属性 较 多 ， 简 单 表 示 如 下 : 
<img src=" 图 片 位 置 " height=" 高 度 " width=" 宽 度 " alt=" 说 明文 字 " align=" 对 齐 "> 


sre 属性 指明 图 片 的 位 置 , 可 采取 绝对 路 径 或 者 相对 路 径 。 路 径 及 图 片 名 尽量 不 
要 出 现 中 文字 符 。 

height, width 决定 图 片 在 网 页 上 显示 的 大 小 .例如 ,一 张 图 片 的 大 小 为 100*100， 
你 可 以 将 这 两 个 属性 分 别 设置 为 50, 这 样 在 网 页 上 显示 的 效果 就 是 一 张 50*50 大 小 
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的 图 片 。 当 然 ， 不 推荐 这 么 做 ， 我 们 在 做 网 站 时 ， 应 该 先 把 图 片 等 素材 准备 好 。 如 
果 不 设 置 height、width 属性 ， 网 页 将 会 以 图 片 的 默认 大 小 显示 。 

当 我 们 浏览 网 页 时 ， 有 时 把 鼠标 指针 放 在 一 张 图 片上 , 会 发 现 鼠 标 指针 旁边 显示 
了 一 些 文字 ， 以 对 图 片 进 行 说 明 。 这 就 是 alt 属性 的 作用 了 。 此 外 ， 在 图 片 未 显示 出 
来 或 显示 不 出 来 时 , 也 会 以 这 一 段 字 代替 , 让 浏览 者 知道 这 个 图 片 究竟 是 干什么 用 的 。 

align 属性 : 对 齐 ， 决 定 图 片 在 包含 它 的 容器 中 的 对 齐 方式 。 

此 外 , 还 可 以 指定 文本 与 图 像 的 距离 。 文 本 与 图 像 的 间距 用 vspace=#, hspace=# 
指定 ，# 和 表示 整数 ， 单 位 是 像素 。 前 者 指定 纵向 间距 ， 后 者 指定 横向 间距 。 


示例 1-10: 


<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 测 试 </title> 
</head> 
<body> 
<img src="images/moon.JPG" width="300" height="300" alt=" 月 满 西山 " align="middle"> 
在 图 片 中 间 显示 
</body> 
</html> 


效果 如 图 1-21 所 示 。 
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图 1-21 插入 图 片 标签 测试 效果 图 


。27。 


@ l. x 
Š HTML 网 页 设计 


< 


从 图 1-21 可 以 看 到 , 文字 相对 于 图 片 是 上 下 居中 显示 的 ， 当 鼠标 指针 放 在 图 片 
上 时 ， 出 现 了 说 明文 字 : “月 满 西 山 ”。 


1.6.9 插入 特殊 符号 


某 些 字符 在 HTML 中 有 特殊 的 含义 ， 例 如 “<”、“>” 等 ， 如 果 我 们 想 在 网 页 
上 显示 这 些 符 号 ， 不 能 很 简单 地 输入 “<”、“>”， 因 为 它们 会 被 解释 为 标签 的 开 
始 或 结束 。 例 如 : 想 在 页 面 上 显示 “<font>”， 如 果 直 接 输入 就 会 被 浏览 器 认为 是 
标签 ， 这 时 候 就 要 使 用 他 们 的 转 义 码 。 常 用 的 转 义 码 及 其 对 应 的 符号 如 表 1-1 所 示 。 


R11 常用 的 转 义 码 及 其 对 应 的 符号 


版 权 (6 gcopy: 版 权 所 有 
注册 商标 四 | are | 


特殊 字符 示例 
KFO inagetb retum a: 
AFO if(a&lt:0) return 0; 

&lt:font&gt; 

& 张 三 &amp: 李 四 出 国 了 
引号 (") | smo | &quot: 条 条 大 路 通 罗 马 &quot: 
空格 | 欢 &nbsp: 迎 &nbsp: 光 &nbsp: 临 
元 


需要 注意 的 是 : 

° 转 义 序列 的 各 字符 间 不 能 有 空格 。 
° 转 义 序列 必须 以 “;” 结 束 。 

° 单独 的 & 不 被 认为 是 转 义 开始 。 

e 区 分 大 小 写 。 


1.6.10 ”插入 横 线 


横 线 一 般 用 于 分 隔 同一 HTML 文档 的 不 同 部 分 。 在 窗口 中 划一 条 横 线 非 常 简单 ， 
只 要 写 入 <hr> 即 可 。 可 以 这 么 写 : 


. 28. 


& Ps e, 
第 1 章 HTML # Dreamweaver 简介 p> 


<hr width="50%" size="10" align="center" color="#0033FF"> 


其 中 width 指 长 度 , 可 以 用 占 页 面 长 度 的 百分比 , 或 者 以 数字 来 固定 横 线 长 度 。 
size 指 横 线 高 度 ， 以 像素 为 单位 。 

align 指 在 页 面 里 是 如 何 对 齐 的 ， 可 以 有 左 、 中 、 右 三 种 对 齐 方 式 。 

color 定义 横 线 的 颜色 。 

此 外 ， 还 可 以 添加 noshade 属性 来 规定 横 线 有 没有 阴影 。 

示例 1-11: 


<hr width="50%" align="center" color="red"> 


页 面 上 的 显示 效果 如 图 1-22 所 示 。 
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图 1-22 插入 横 线 <hr> 标 签 效果 图 


如 果 想 让 线 的 长 度 随 页 面 而 改变 , 以 保持 占 页 面 长 度 的 50%, 可 以 采用 “width= 
数字 ”来 固定 长 度 。 


1.6.11 添加 多 媒体 元 素 


多 媒体 是 现代 网 站 的 必 备 元 素 ， 有 了 它 网 站 变 得 更 丰富 漂亮 ， 更 能 吸引 用 户 。 
添加 了 多 媒体 的 网 站 从 视觉 、 听 觉 操作 性 上 让 用 户 全 面 地 感觉 到 华丽 和 实用 。 
下 面 就 给 大 家 介绍 几 种 多 媒体 元 素 。 


1. 滚动 文字 


利用 <marquee> 标 签 可 以 让 文字 在 网 页 上 动态 滚动 。 
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(1) 基本 滚动 : <marquee> ... </marquee>。 
<marquee> 我 从 右 跑 到 左 ， 不 会 停止 </marquee> 
默认 情况 下 ， 文 字 将 一 遍 一 遍地 从 页 面 右边 向 左边 滚动 。 
(2) 方向 : <marquee direction=#>。 # 可 以 是 : left、right。 


<marquee direction=left> 我 从 右 向 左 移 ! </marquee> <p> 
<marquee direction=right> 我 从 左 向 右 移 ! </marquee> 


(3) 方式 : <marquee behavior=#>。 # 可 以 是 scroll、slide、alternate。 


<marquee behavior=scroll> 我 一 遍 一 遍 往 左 走 ! </marquee> <P> 
<marquee behavior=slide> 我 只 走 一 次 就 停 了 ! </marquee> <P> 
<marquee behavior=alternate> 我 从 右 到 左 ， 再 从 左 到 右 走 ! </marquee> 


(4) 循环 : <marquee loop=#>。# 代 表 次 数 ， 若 未 指定 则 一 直 循 环 。width 指 滚动 
围 的 长 度 ， 若 要 设置 高 度 ， 则 用 height 属性 。 


<marquee loop=3 width=50% behavior=alternate> 我 只 走 3 趟 ! </marquee> 

(5) 速度 : <scrollamount=#>。 指 深 动 速度 。 

<marquee scrollamount=20> 我 走 得 好 快 啊 ! </marquee> 

(6) 延 时 : <scrolldelay= 坟 。 指 文字 滚动 间隔 ，scrolldelay 值 是 毫秒 。 
<marquee scrolldelay=500 scrollamount=100> 我 走 一 步 ， 停 一 停 ! </marquee> 


还 有 一 些 属性 ， 如 align: X, PLAJ top, middle, bottom 等 ; 而 hspace= 数 
vspace= 数 值 ， 则 用 来 设置 滚动 文字 与 周围 元 素 的 间距 。 


四 


2. 背景 音乐 
使 用 bgsound 标签 可 以 给 网 页 设置 背景 音乐 。 音 乐 通常 可 以 为 mid、mp3 等 格 
。 格 式 类 似 于 : 


<bgsound src="jy001.mid" loop=3> 
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设置 好 音乐 的 路 径 和 循环 次 数 ， 打 开 页 面 后 就 可 以 听 到 动人 的 音乐 了 。 如 果 没 
写 loop 属性 或 loop 设置 为 -1， 则 代表 无 限 次 循环 播放 音乐 。 


【小 结 】 


HTML 文档 是 包含 标记 标签 的 文本 文件 ， 这 些 标签 告诉 Web 浏览 器 如 何 显 
示 页 面 

HTML 标签 不 区 分 大 小 写 

标签 具有 属性 ， 属 性 进一步 描述 网 页 上 HTML 元 素 的 附加 信息 

HTML 文档 分 为 head 部 分 和 body 部 分 ， 它 们 并 列 位 于 <html> 标 签 内 
Meta 用 于 提供 有 关 页 面 的 信息 ， 搜 索引 擎 通常 会 用 到 这 些 标签 
Dreamweaver 是 一 种 强大 的 Web 编辑 工具 ， 可 以 灵活 地 创建 网 页 

在 Dreamweaver 中 设计 网 站 的 第 一 步 是 “定义 站 点 ” 

HTML 基本 标签 : <h1>……<h6>、<p>、<br>、<pre>、<font>、<img> 
插入 图 片 : <img; 插入 特殊 符号 : <font>; 插入 横 线 : <hr> 

让 文字 滚动 <marquee>; 添加 背景 音乐 : <bgsound> 


[ 自 测 题 】 


1. 在 HIML 中 ， 下 列 代码 (  ) 可 以 实现 每 隔 60 秒 自动 刷新 页 面 的 功能 。 


A. <meta http-equiv="refresh" content="1"> 
B. <meta http-equiv="refresh" content="60"> 
C. <meta http-equiv="expires" content="1"> 


D. <meta http-equiv="expires" content="60"> 
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2. 下 列 语句 中 ，( M HTML 页 面 的 标题 设置 为 “HTML 练习 ”。 


A. <head>HTML 练习 </head> B. <title>HTML 练习 </title> 

C. <body>HTML 练习 </body> D. <html>HTML 练习 </html> 
3. 在 Dreamweaver 中 ， 设 计 网 站 的 第 一 步 是 (  )。 

A. 创建 模板 B. 创建 网 页 

C. 定义 站 点 D. 在 站 点 中 创建 库 项 目 


4.( ”) 标 签 有 助 于 进行 搜索 操作 ， 它 包含 在 HTML 文档 头 部 中 ， 并 使 用 属性 
和 属性 值 组 合 。 
A. <title> B. <body> 
C. <br> D. <meta> 
5. 下 列 叙述 正确 的 是 ( Jo 
A. <font> 标 签 中 的 size 属性 用 于 设置 文本 大 小 ， 默 认 size=1 
B. 有 序列 表 <ol>、 无 序列 表 <ul>、 自 定义 列表 <dl> 之 间 不 能 互相 嵌 套 
C. <br> 与 <p> 没 有 区 别 ， 都 代表 换行 
D. 标题 标签 中 <h1> 最 大 ，<h6> 最 小 


【 上 机 部 分 】 


上 机 目标 


° 使 用 基本 的 HTML 标签 创建 简单 的 HTML 文档 
o 使 用 Dreamweaver 创建 网 站 
° 练习 HTML 常用 标签 
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练习 1: 使 用 基本 的 HTML 标签 制作 网 页 


【问题 描述 】 
使 用 理论 课 中 学 到 的 标签 ， 制 作 简单 网 页 ， 如 图 1-23 所 示 : 


忆 欢 迎 光临 我 的 小 站 - Microsoft Internet Explorer E 
XAO RRO FEV KAA IAW HHW 
ERE- I- GAA AR urar gas Q ” 


HEO [E EARNER- htm z] Ora 链接” 


1-23 ”新 建 网 页 对 话 杠 
【问题 分 析 】 
主要 是 练习 HTML 最 基本 的 标签 : 
<html>，<head>，<title>，<body> 


对 于 一 个 完整 的 HTML 网 页 来 说 ， 其 结构 可 表示 如 下 。 


<title> HTML 部 分 


</title> 
saw 
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注意 网 页 的 标题 ， 标 题 在 <title> 标 签 里 面 设置 。 由 于 网 页 文字 分 为 多 行 ， 所 以 
在 每 一 行 的 代码 后 面 ， 应 该 加 上 一 个 换行 标签 <br>。 

给 <body> 标 签 加 上 background 属性 , 设置 背景 图 片 。 这 里 要 注意 图 片 和 网 页 的 
位 置 关系 ， 也 就 是 相对 路 径 的 问题 。 


【参考 步骤 】 


(1) 新 建 一 个 文本 文档 。 
(2) 书写 代码 。 


<html> 
<head> 
<title> 欢 迎 光临 我 的 小 站 </title> 
</head> 
<body background="pic1.gif"> 
欢迎 您 的 光临 ! <br> 
希望 这 里 能 给 大 家 带 来 欢乐 。<br> 
同时 也 希望 您 多 提 意 见 大 家 一 同 进步 。<br> 
</body> 
</html> 


(3) 把 文本 文档 另存 为 1-1.htm。 


练习 2: 使 用 Dreamweaver 制作 网 站 首页 


【问题 描述 】 

定义 站 点 ， 名 称 为 “我 的 站 点 ">， 本 地 根 路 径 为 E 盘 “myweb” 文 件 夹 下 ， 并 
为 该 站 点 创建 首页 ， 名 称 为 “index.html”。 教 员 应 向 学 员 提供 相关 图 片 ， 作 为 解决 
此 问题 所 需要 的 上 机 素材 。index.html 页 的 效果 图 如 图 1-24 所 示 。 


kenet Tat oreet Et E - 2 
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1-24 首页 浏览 


【问题 分 析 】 
使 用 Dreamweaver 先 新 建站 点 和 页 面 。 


【参考 步骤 】 

(1) 启动 Dreamweaver。 

选择 “开始 ”|“ 程 序 ”|“Adobe Dreamweaver CS4” 命 令 启动 Dreamweaver. 

(2) 新 建站 点 。 

@ 在 “我 的 电脑 ” 玉 盘 中 新 建 名 为 “myweb” 的 文件 夹 ， 该 文件 夹 作 为 站 点 的 
本 地 根 文件 夹 ， 并 将 上 机 素材 所 在 的 文件 夹 复制 到 “myweb” 文 件 夹 下 。 

@ 在 Dreamweaver 中 选择 菜单 栏 “ 站 点 ”| “新建 站点”， 此 时 ， 将 显示 “站 点 
定义 ”对 话 框 。 

© 该 对 话 框 默认 显示 的 是 “基本 ”选项 卡 ， 我 们 直接 切换 到 “高 级 ”选项 卡 来 
编辑 该 站 点 ， 单 击 该 对 话 框 上 面 的 “高 级 ”按钮 ， 将 出 现 “高 级 ”选项 卡 对 话 框 。 

@@ 在 该 对 话 框 的 “分 类 ”选项 中 选择 “本 地 信息 ?， 在 站 点 名 称 一 栏 中 输入 “我 
的 站 点 ”。 

© 单 击 “ 本 地 根 文件 夹 ” 栏 后 面 的 文件 夹 图 标 , 选择 存储 网 页 的 根 文件 夹 ， 即 
前 面 在 EE 盘 所 设计 好 的 文件 夹 “myweb”。 
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© 因为 现在 我 们 所 编辑 的 是 本 地 站 点 ， 所 以 其 他 选项 使 用 默认 。 单 击 “ 确 定 ” 
按钮 ， 该 站 点 编辑 成 功 。 

(3) 新 建 页 面 。 

@ 选择 “文件 ”| “新建 ”命令 ， 将 出 现 如 图 1-25 所 示 的 “新 建文 档 ” 对 话 框 ， 
单 击 “ 创 建 ” 按 钮 ， 该 页 面 创建 成 功 。 
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图 1-25 “新 建文 档 ” 对 话 框 


D 选择 “文件 ”| “保存 ”命令 ,将 该 页 面 保存 至 本 地 站 点 根 文件 夹 巨 盘 myweb 
文件 夹 下 ， 并 将 该 页 面 命 名 为 index.html， 如 图 1-26 所 示 。 
另存 为 HE 


mezD: [osa ORGE 


s `e. 


Unicode 标准 化 表单 让 ): | AADF, ERARE) zi 
T BHE Wnicode S£ (08) G) 


1-26 保存 页 面 对 话 框 
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© 选择 “修改 ”| “页面 属性 ”命令 ， 在 页 面 属性 对 话 框 中 的 “外 观 ” 栏 中 设 
置 背景 颜色 为 “#A2C8EB”, “左边 距 ” 和 “上 边 距 ”都 设 为 “0”。 

© 在 页 面 属 性 的 “标题 /编码 ” 栏 中 修改 该 页 面 的 标题 为 “我 的 首页 ”， 并 设置 
编码 为 “GB2312”， 如 图 1-27 所 示 ， 然 后 单 击 “ 确 定 ”按钮 即 可 。 


az Bwen 
外 各 ay: Eea 
C3 sor) ni — =] 


m: [DE -| Ei) | 
Unicode 奈 难 化 表单 加 。 [E AIN, CAREER =] 
P 8 Unicode ES OMG) 
文件 文件 夹 : D: \ 我 的 文档 wwyweb\ 
站 点 文件 亚 : D:\ 我 的 文档 wyweb\ 
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1-27 “页 面 属性 ”对 话 框 


(4) 使 用 表格 布置 页 面 。 

@ 选择 “插入 ”菜单 中 的 “表格 ”选项 ， 在 弹出 的 “表格 ”对 话 框 中 设置 行 数 
为 “2”， 列 数 为 “1”， 宽 度 为 “760 像素 "， 单 元 格 边框 、 单 元 格 间距 和 单元 格 边 距 
都 设 为 “0?。 单 击 “ 确 定 ”按钮 ， 即 可 成 功 创建 表格 1。 

@ 将 光标 停留 在 第 一 行 的 单元 格 里 ， 选 择 “ 插 入 ”菜单 中 的 “媒体 ”|“SWF” 
选项 ， 在 弹出 的 “选择 文件 ”对 话 框 中 选择 flash 文件 所 在 的 位 置 为 “index_image” 
文件 夹 下 的 “banner.swf” 文 件 ， 然 后 单 击 “ 确 定 ” 按 钮 ， 即 可 将 flash 成 功 插入 。 

O 将 光标 停留 在 第 二 行 的 单元 格 里 ， 选 择 “插入 ”菜单 中 的 “表格 ”选项 ， 插 
入 一 个 1 行 3 列 、 宽 度 为 760 像素 的 谋 套 表格 2， 同 样 将 单元 格 边框 、 单 元 格 间距 
和 单元 格 边 距 都 设 为 “0”。 

@ 将 光标 停留 在 表格 2 的 第 一 个 单元 格 里 ,选择 “插入 ”菜单 中 的 “图 像 ” 选 
项 ， 打 开 “ 选 择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 要 插入 的 图 像 文件 “image” 
文件 夹 下 的 logo new.gif. 

© 将 光标 停留 在 表格 2 的 第 二 个 单元 格 里 ,选择 “插入 ”菜单 中 的 “表格 ” 选 
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项 ， 插 入 一 个 9 行 1 列 、 宽 度 为 215 像素 的 底 套 表格 3， 同 样 将 单元 格 边框 、 单 元 
格 间距 和 单元 格 边 距 都 设 为 0。 

© 在 表格 3 中 的 9 行 中 依次 插入 “image” 文 件 夹 下 的 如 下 9 张 图 片 : wall.gif、 
market.gif. succes.gif. need.gif. ask.gif. dwnl.gif. rants.gif. cont.gif 和 linkdwn.gif. 

@ 在 表格 2 的 第 三 个 单元 格 中 插入 “image” 文 件 夹 下 的 图 片 default.gif。 

(5) 浏览 页 面 。 

@ 选择 “文件 ” |“ 保存 ”命令 ， 将 该 页 面 保 存 。 

@ 4 F12 快捷 键 浏览 该 页 面 。 

至 此 , 使 用 Dreamweaver 完成 了 制作 包含 Flash 和 图 片 的 页 面 , 如 图 1-28 所 示 。 


lde? For sma 
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图 1-28 首页 浏览 


+ 第 二 阶段 + 


练习 3: 使 用 标签 布局 页 面 


【问题 描述 】 
做 出 如 图 1-29 所 示 的 效果 : 其 中 , 问题 3 P int, if —Ise. return 等 关键 字 为 蓝 色 。 


& © © 
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间 题 1: 

10; 1=2; 

条? 的 值 。 

间 题 2: 

Xi+Kz=O0; Iz=2; 
EZA N 

(>: 

int max (int x, int y) 
t 


if (a)y) return x 
else return y 


图 1-29 标签 布局 页 面 图 
【问题 分 析 】 


要 注意 下 标的 位 置 不 同 ， 使 用 的 标签 也 不 同 ; 横 线 的 画 法 ; 一 段 内 容 中 插入 不 
同 颜色 所 使 用 的 标签 ; 空格 在 HTML 里 的 写法 。 


[ 课 后 作业 】 


1. 做 一 个 自我 介绍 的 网 页 ， 并 给 其 添加 背景 图 片 。 
2. 修改 作业 1， 使 背景 图 片 和 网 页 位 于 不 同 的 目录 ， 使 用 相对 路 径 。 
3. 使 用 meta 标签 设置 作业 1 的 网 页 关键 字 、 刷 新 。 
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| = 
Q 课程 目标 
P 掌握 表格 的 用 法 
> 表单 标记 
> 添加 表单 元 素 
P 输入 类 表单 元 素 
> 菜单 列表 类 表单 元 素 
> 文本 域 


< 
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4, 简介 


表格 和 表单 也 是 网 页 中 常用 的 元 素 ， 表格 用 于 设计 和 规划 网 页 内 容 ， 表 单 则 多 
用 于 注册 页 面 的 设计 。 


2.1 表格 的 使 用 


表格 是 日 常生 活 中 很 常用 的 组 织 数据 的 方法 ， 在 Word 中 创建 一 个 表格 时 ， 只 
需要 指定 表格 的 行 数 和 列 数 即 可 ， 非 常 简单 。 在 网 页 中 做 一 个 表格 稍微 复杂 一 点 ， 
需要 我 们 自 定义 表格 的 各 项 属性 ， 制 作 表格 的 简要 步骤 如 下 。 


1. 告诉 浏览 器 绘制 一 个 表格 区 域 

使 用 <table></table> 来 完成 ， 此 时 预览 的 话 ， 这 片区 域 是 空 的 。 不 要 紧 ， 接 着 告 
诉 浏览 器 给 表格 添加 一 个 行 。 

2. 添加 行 代码 

使 用 <tr></tr> 来 完成 ， 此 时 代码 如 下 所 示 。 

示例 2-1: 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 测 试 </title> 
</head> 
<body> 
<table> 
<tr></tr> 
</table> 
</body> 
</html> 


再 次 预览 ， 仍 然 发 现 页 面 为 空白 。 很 明显 ， 浏 览 器 显示 的 是 每 一 个 单元 格 ， 所 


Je, 
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以 有 了 框架 还 不 够 ， 还 要 给 表格 设 定单 元 格 。 
3. 添加 单元 格 


使 用 <td></td> 来 完成 ， 如 下 所 示 。 


这 里 ， 我 们 往 行 里 添加 了 一 个 单元 格 ， 并 设置 内 容 为 1。 保 存 后 的 预览 效果 如 


2-1 所 示 。 
怎么 没有 边框 呢 ? 边框 需要 自己 加 上 才 行 。 这 个 属性 叫做 border, 修改 代码 如 下 。 


<table border=1> 


</table> 


图 2-1 添加 单元 格 预览 界面 图 2-2 添加 边框 预览 界面 


图 2-2 的 效果 就 是 我 们 辛苦 劳动 的 结晶 吗 ? 的 确 是 的 ， 事实 上 ， 最 基本 最 简单 
的 表格 就 是 它 了 。 但 只 要 掌握 好 <table>、<tr> 和 <td> 标 签 ， 再 复杂 的 表格 也 能 做 得 
出 来 ， 我 们 一 步 一 步 学 习 。 
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(1) 最 简单 的 表格 如 表 2-1 所 示 。 


表 2-1 最 简单 的 表格 


代码 片段 说 HB 
<table border=1> 
<tr><td> 1 </td> </tr> 最 基本 的 表格 


</table> 


(2) 由 表 2-1 可 知 , 一 个 <td></td> 就 代表 一 个 单元 格 , 所 以 我 们 再 加 两 个 单元 格 ， 
如 表 2-2 所 示 。 


表 2-2 添加 两 个 单元 格 


代码 片段 说 HH 
<table border=1> 
S 在 <t> 标 签 内 可 以 有 多 个 
<td> 1 </td><td> 2 </td> 
aaa <td>， 每 个 <td> 代 表 一 个 单 
<tr> 元 格 
</table> 


(3) 再 加 一 行 ， 也 就 是 加 一 个 <tr> 标 签 ， 如 表 2-3 所 示 。 


表 2-3 添加 一 行 
代码 片段 说 ” 明 
<table border=1> 
<tr> 
<td> 1 </td><td> 2 </td> 
<td> 3 </td> 每 个 <t> 代 表 一 行 ， 有 多 少 
</tr> 


个 <t> 标 签 ， 就 代表 表格 有 
多 少 行 


<tr> 
<td> 4 </td><td> 5 </td> 
<td> 6</td> 

</tr> 
</table> 


(4) ERMAR, HAEA RE HETE A E Z EE F FEE HE 
放 ， 我 们 还 可 以 合并 单元 格 ， 列 的 合并 ， 如 表 2-4 所 示 。 
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表 2-4 列 的 合并 
代码 片段 说 BB 
<table border=1> 注意 ， 第 一 行 有 3 个 单元 格 ， 
<t> Eas 5 
Gis 第 二 行 只 剩 下 1 个 单元 格 了 ， 
<td>2</td> 为 什么 ? 因为 第 二 行 的 3 个 
<ta>3<hd> 单元 格 被 合并 为 一 个 了 。 
</tr> 


因为 要 合并 的 是 同一 行 的 3 
个 列 ( 单 元 格 ) ， 所 以 是 
colspan(col 是 column- 列 的 缩 
写 ，span 意 为 跨越 ， 且 值 为 3 


<tr> 

<td colspan="3">4</td> 
</tr> 
</table> 


(5) 行 的 合并 : 


R25 行 的 合并 
代码 片段 


<table border=1> 
a= 这 里 要 合并 的 是 同一 列 的 两 
个 行 , 也 就 是 要 跨越 的 是 行 ， 
所 以 叫做 “rowspan”。 


<td rowspan="2"> 1</td> 
<td> 2</td> 
<td> 3</td> 


<> 合并 结束 后 ， 第 一 列 的 两 个 
单元 格 就 被 合并 了 。 
<td> 5</td> 
Deg 思考 : 如 果 要 合并 3、6 两 个 
<h> 单元 格 ， 该 怎么 写 
</table> 


以 上 我 们 讨论 了 表格 中 的 单元 格 ， 下 面 再 对 表格 进行 深入 调整 。 
(6) 改变 表格 大 小 ， 定 义 表 格 的 宽度 (width) 和 高 度 height)， 如 表 2-6 所 示 。 


表 2-6 定义 表格 的 宽度 和 高 度 


代码 片段 说 — BB 
<table border=1 width=70 height=70> 
s 因为 是 对 整个 表格 设置 的 宽 
<td> 1 </td><td> 2 </td> pay wo š 
<td> 3 </td> 度 和 高 度 ,所 以 width 和 height 
<I> 属性 要 放 在 <table> 标 签 内 
</table> 
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(7) 设置 单元 格 内 文字 的 位 置 。 

单元 格 内 文字 的 位 置 并 不 是 一 成 不 变 的 ， 我 们 可 以 使 用 上 中 下 、 左 中 右 等 多 种 
方式 来 调整 。 

左 中 右 用 align 属性 来 表示 ， 分 别 为 left. center, right; 上 中 下 用 valign 属性 来 
表示 ， 分 别 为 ttp、middle、bottom， 如 表 2-7 所 示 。 


R27 设置 单元 格 内 文字 的 位 置 


代码 片段 说 BB 
<table width=85 height=85 border=1> 
<tr> " = ye 
<td align="center" valign="bottom">1</td> sisa Mvalign ANAT 
<td align="right" valign="top">2</td> 设置 ， 所 以 放 在 <td> 标 签 内 。 
<I> 同 理 , 如 果 要 让 表格 在 网 页 上 
<tr> 


居中 显示 ， 则 只 需 在 <table> 
标签 里 面 设 置 align="center" 
即 可 


<td align="right" valign="bottom">3</td> 
<td align="left" valign="middle">4</td> 
</tr> 
</table> 


(8) 设置 表格 、 单 元 格 、 边 框 背景 颜色 : bgcolor。 
我 们 可 以 给 整个 表格 或 每 一 行 设置 背景 颜色 ， 也 可 以 给 单元 格 设置 背景 颜色 ， 
还 可 以 给 表格 边框 设置 背景 颜色 ， 如 表 2-8 所 示 。 


表 2-8 设置 表格 、 单 元 格 和 边框 的 背景 色 
说 BB 

对 整个 表格 设置 属性 ， 如 高 
度 、 长 度 、 边 框 、 表 格 背 景 
颜色 、 边 框 背景 颜色 等 要 放 
在 <table> 标 签 内 ， 相 应 的 ， 
对 行 、 单 元 格 的 属性 设置 也 
要 放 在 <tr>、<td> 标 签 内 。 


代码 片段 
<table width=70 height=70 border=1 
bordercolor="red" bgcolor= "yellow"> 
<tr bgcolor="gray"> 
<td> 1 </td><td > 2 </td> 
<td> 3 </td> 
</tr> 
<tr> 
<td bgcolor="white"> 


4</td> 代码 中 设置 的 颜色 有 : 
<td bordercolor="green"> e° 表格 背景 : 黄色 
5</td> ; 
<td bgcolor="white"> Manaqa aqa hua 
6</td> 。 第 一 行 背景 : 灰色 
<> e 4、6 单 元 格 背景 : 白色 
</table> 


e 5 单元 格 边框 颜色 : 绿色 


。46。 


“° 


第 2 章 表格 和 表单 > 


仔细 观察 表 2-8 中 的 效果 图 ， 会 发 现 : 

e 整个 表格 有 一 个 大 边框 ; 

° 每 个 单元 格 也 有 边框 ; 

° 表格 边框 与 单元 格 边框 的 颜色 都 可 以 调整 ; 

e 单元 格 与 单元 格 之 间 有 间距 ; 

e 单元 格 与 单元 格 之 间 的 间距 颜色 和 表格 背景 颜色 一 致 ; 

e 单元 格 内 文字 与 单元 格 边 框 之 间 可 以 有 距离 。 

另外 ， 我 们 也 可 以 指定 表格 、 行 、 单 元 格 的 背景 图 片 ， 使 用 的 是 background= 
“图 片 路 径 ”， 这 和 设置 网 页 背景 图 像 是 一 致 的 。 

(9) 设置 单元 格 填充 距离 。 

单元 格 填充 距离 是 指 单元 格 内 文字 与 单元 格 边框 的 距离 , 属性 名 为 cellpadding， 
对 单元 格 填充 距离 的 设置 如 表 2-9 所 示 。 


表 2-9 设置 单元 格 填充 距离 


代码 片段 说 m 


<table width=70 height=70 border=1 这 个 属性 经 常用 到 ， 可 以 让 


人 表格 内 文字 的 显示 更 美观 。 

i 四 这 里 设置 了 填充 距离 为 10 像 
< <, 

Pa i Ii 素 ， 可 以 看 到 左右 两 端 都 空 


RT 10 像素 


</table> 


(10) 设置 单元 格 间距 。 
单元 格 间距 是 指 单元 格 与 单元 格 之 间 的 距离 ， 也 就 是 边框 与 边框 的 距离 。 单 元 
格 间距 的 设置 如 表 2-10 所 示 。 


表 2-10 设置 单元 格 间距 


代码 片段 说 B 

<table width=70 height=70 border=1 cellspacing="20" 
bgcolor="#FFFF00"> 这 里 设置 了 单 
<tr bgcolor="#FFFFFF"> 元 格 间距 为 20 
Sa 像素 ， 整个 表格 
<tr bgcolor="#FFFFFF"> 的 背景 为 黄色 ， 

<td>3</td> <td>4</td> 每 行 的 背景 为 

<I> 白色 

</table> 
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有 没有 发 现 我 们 上 面 做 的 表格 边框 很 不 美观 ? 很 粗 ! 是 因为 我 们 设置 了 
border=1, border 值 只 能 接受 整数 ， 但 假如 将 border 设 为 0， 则 边框 又 消失 了 。 下面 
用 填充 距离 和 间距 以 及 背景 颜色 来 “配置 ”一 个 较为 美观 的 表格 ， 如 表 2-11 所 示 。 


表 2-11 设置 距离 、 间 距 和 背景 色 


代码 片段 说 明 

<table width="80" border="0" cellpaddine="5" 
cellspacing="1" bgcolor="#0066FF"> 
<tr bgcolor="#FFFFFF"> 

SY 注意 粗 体 部 分 代 

<td>2</td> A dii 
Jaa 码 的 含义 , 请 查阅 
<tr bgcolor="#FFFFFF"> 代码 及 前 面 示例 ， 

<td>4</td> 自行 分 析 原 理 

<td>5</td> 
</tr> 

</table> 


表 2-11 中 的 效果 图 的 边框 看 起 来 是 不 是 比 前 面 好 多 了 ? 

有 时 候 我 们 做 表格 ， 需 要 让 表格 内 某 些 单元 格 的 文字 居中 并 加 粗 。 我 们 可 以 用 
单元 格 的 属性 来 实现 ， 也 可 以 用 表格 的 另 一 个 元 素 <th> 来 完成 。 

(11) 设置 表格 表 头 ， 如 表 2-12 所 示 。 


表 2-12 设置 表格 表 头 


代码 片段 效果 说 BB 
<table width="130" border="0" cellpadding="5" 
cellspacing="1" bgcolor="#0066FF"> 
<tr bgcolor="#FFFFFF"> 
<th> 姓 名 </th> 
Se denak 
<tr bgcolor="#FFFFFF"> 姓名 | 性 别 单元 格 ， 唯 一 的 区 
<td> 张 三 </td> = |3 别 就 是 <th> 可 以 把 
<td> 男 </td> 李 四 x 单元 格 内 容 变 为 
</tr> = 
<tr bgcolor="#FFFFFF"> 粗 体 并 居中 显示 
<td> 李 四 </td> 
<td> 女 </td> 
</tr> 
</table> 
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(12) 设置 表格 标题 。 
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表格 标题 是 对 表格 的 一 个 说 明 ， 就 像 文章 的 题目 一 样 。 可 以 使 用 <caption> 标 签 


来 完成 ， 如 表 2-13 所 示 。 


代码 片段 


表 2-13 设置 表格 标题 


<table width="130" border="0" 
cellspacing="1" bgcolor="#0066FF"> 
<caption valign="bottom" align="right"> 学 员 性 别 表 


</caption> 

<tr bgcolor="#FFFFFF"> 
<th> 姓 名 </th> 
<th> 性 别 </th> 

</tr> 

<tr bgcolor="#FFFFFF"> 
<td> 张 三 </td> 
<td> 男 </td> 

</tr> 

<tr bgcolor="#FFFFFF"> 
<td> 李 四 </td> 
<td> 女 </td> 

</tr> 

</table> 


学 员 性 别 表 


<caption> 是 


属于 表格 的 


表格 是 网 页 制作 过 程 中 很 常用 的 元 素 ， 可 以 使 页 面 元 素 更 加 有 条 理 地 按照 我 们 
的 意愿 摆 放 。 我 们 可 以 采取 表格 单元 格 内 顽 套 子 表格 的 方式 来 完成 功能 复杂 的 页 面 。 


2.2 表单 


在 HTML 文档 中 , 表单 通常 用 于 注册 页 面 , 当 用 户 填写 好 信息 后 做 完 提交 操作 ， 
将 表单 的 内 容 从 客户 端的 浏览 器 传送 到 服务 器 上 ， 经 过 服务 器 处 理 程序 后 ， 再 将 用 
户 所 需 信息 送 回 客户 端的 浏览 器 上 ， 这 样 网 页 就 具有 了 交互 性 。 
最 常见 的 表单 主要 包括 文本 框 、 单 选 按钮 、 复 选 框 、 按 钮 等 。 如 图 2-3 所 示 ， 
是 一 个 常见 的 注册 页 面 ， 它 包含 了 文本 框 、 单 选 按 钮 、 复 选 框 、 按 钮 等 表单 内 容 。 
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SAPE 


TMAR Sm - 1275 + KSERA E AN 
ttal: 

请 选择 您 的 性 别 c As c m= 

EBEP): 

请 葵 入 密码 ， EAKAS. -一 ， 

请 不 要 使 用 任何 基 亿 “* ` ° ° 或 ma. 字符 

EBSi): 一 一 一 

请 机 办 一 所 确认 . 

密友 问题; 
TESMER * 

HESE: 
TiESW0SIR=EIES 3 , AFRESH . 

Essilihit : © — 

请 输入 有 效 的 邮件 地 址 ， 加 果 您 所 记 了 您 的 罕 码 ,您 可 以 通过 它 找 加 eks | 
厂 显示 高 用 户 设 置 选项 am| # m 


图 2-3 网 页 中 常见 的 表单 


在 HTML 中 ，<form></form> 标 签 用 来 创建 一 个 表单 ， 定 义 表单 的 开始 和 结束 ， 
在 这 两 个 标签 之 间 的 内 容 都 属于 表单 的 内 容 。 
添加 表单 的 语法 如 下 : 


<form name=" 表 单 名 " method=" 传 送 方式 " action=" 表 单 处 理 程序 "> 


表 2-14 列 出 了 表单 属性 的 详细 说 明 。 


表 2-14 ”表单 属性 

属 性 说 BB 

用 于 给 表单 命名 。 这 一 属性 不 是 表单 的 必需 属性 ， 但 为 了 防止 表单 在 提交 到 

name 后 台 处 理 程序 时 出 现 混乱 ， 一 般 要 设置 一 个 与 表单 功能 相符 的 名 称 。 例 如 ， 

注册 页 面 的 表单 可 以 命名 为 register 

用 于 指定 表单 需要 提交 的 地 址 。 一 般 来 说 ， 当 用 户 单 击 表 单 上 的 提交 按钮 后 ， 

action 信息 会 发 送 到 action 属性 所 指定 的 地 址 ,如 :action=http://www.163.com 或 action= 

"mailto:abc@sina.com" 

此 属性 告诉 浏览 器 将 数据 发 送 给 服务 器 的 方法 ， 可 取 值 为 get 或 post。 

e method=get: 使 用 这 个 设置 时 ， 表 单数 据 会 附加 在 URL 之 后 ， 由 用 户 端 
直接 发 送 到 服务 器 ， 所 以 速度 比 post 快 ， 但 缺点 是 数据 长 度 不 能 太 长 。 
在 没有 指定 method 的 情形 下 ， 一 般 都 会 视 get 为 默认 值 

e method=post: 使 用 这 个 设置 时 ， 表 单数 据 是 作为 一 个 数据 块 与 URL 分 开 
发 送 的 ， 所 以 通常 没有 数据 长 度 上 的 限制 ， 缺 点 是 速度 会 比 get 慢 


method 
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例如 ， 要 使 用 post 方法 将 表单 提交 到 www.163.com， 如 下 所 示 。 


<form name="register" method="post" action="http://www.163.com"> 


</form> 


2.3 ”添加 表单 元 素 


按照 表单 元 素 的 填写 方式 可 以 将 表单 分 为 输入 类 控件 和 菜单 列表 类 控件 。 输 入 类 
的 控件 一 般 以 input 标记 开始 ， 说 明 这 一 表单 元 素 需 要 用 户 的 输入 ; 而 菜单 列表 类 控 
件 则 以 select 开始 ， 表 示 用 户 需 要 选择 。 

input 标记 定义 的 表单 元 素 最 常用 的 有 文本 框 、 按 钮 、 单 选 按钮 等 ， 


基本 语法 是 : 


<input name=" 控 件 名 称 " type =" 控 件 类 型 "> 


</form> 


input 标记 所 包含 的 元 素 类 型 如 表 2-15 所 示 。 


表 2-15 input 标记 所 包含 的 元 素 


这 个 标记 的 


元 素 类 型 说 BH 

text 文本 字段 

Password 密码 域 ， 用 户 在 输入 时 不 显示 具体 内 容 ， 以 * 代 蔡 
Tadio 单 选 按钮 

checkbox 复 选 框 

button 普通 按钮 

submit 提交 按钮 

Teset 重 置 按钮 

hidden 隐藏 域 

file 文件 域 
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234 文本 字段 (text) 和 密码 域 (password) 


文本 字段 和 密码 域 用 于 创建 单行 文本 输入 框 ， 供 访问 者 输入 单行 文本 信息 。 属 
性 和 说 明 如 表 2-16 所 示 。 


表 2-16 text 属性 描述 


J 性 说 BB 
当 type=text 时 ， 创 建文 本 字段 
1 当 type=password 时 ， 创 建 密码 域 ， 当 用 户 输入 文字 时 ， 这 些 文字 显示 为 “*?” 
name 文本 字段 或 密码 域 的 名 称 
size 文本 框 在 页 面 中 显示 的 长 度 ， 以 字符 为 单位 
maxlength | 在 文本 框 或 密码 域 中 最 多 可 以 输入 的 字符 数 
value 用 于 定义 默认 值 


例如 ， 创 建 如 图 2-4 所 示 的 登录 页 面 ， 代 码 如 示例 2-2 所 示 。 
示例 2-2: 


<head> 
<title> 文 本 框 和 密码 域 示例 </title> 
</head> 
<body> 
<p> 登 录 页 面 </p> 
<p> 用 户 名 : <input type="text" name="username" value="" size="15"></p> 
<p> 密 ” 码 : <input type="password" name="psd" size="15" maxlength="6"></p> 
</body> 
</html> 


MS a s sn a La C 


BO Nam v Ø 
登录 页 面 


用 户 名 ， 
EB 


BE 
图 2-4 在 页 面 中 添加 文本 字段 和 密码 域 


ert 


. 52. 


“° 


第 2 章 表格 和 表单 > 


232 单 选 按 钮 (radio) 

元 素 radio 用 于 创建 单 选 按钮 ， 单 选 按钮 用 于 一 组 相互 排斥 的 值 。 组 中 的 每 个 单 
选 按钮 应 具有 相同 的 名 称 ， 用 户 一 次 只 能 选择 一 个 选项 。 单 选 按钮 需要 指定 value 的 
值 ,只 有 从 组 中 选 定 的 单 选 按钮 才 会 在 提交 时 生成 naame/value 对 。 表 2-17 列 出 了 radio 
元 素 的 属性 。 


表 2-17 单 选 按钮 属性 


g 性 说 BB 
checked 此 属性 设置 该 单 选 按 钮 被 选中 
name 此 属性 设置 该 单 选 按 钮 的 名 称 
value 此 属性 设置 该 单 选 按 钮 的 值 


例如 ， 在 示例 2-2 的 body 部 分 加 入 以 下 代码 : 
<p> 性 J: 
<input type="radio" name="sex" value="male"> 男 


<input type="radio" name="sex" value="female"> 女 </p> 


创建 单 选 按钮 的 效果 如 图 2-5 所 示 。 


IHO MO FEV sQ IRAV WMO — 
Or O | mm Vm "| 
登录 页 面 

用 记名 三 

salo o 

性 m. cS ck 


IË 


Big CE f p [A Coaputer 


图 2-5 单 选 按钮 


2.3.3” 复 选 框 (checkbox) 


元 素 checkbox 用 于 创建 复 选 框 。 用户 可 以 选择 多 个 复 选 框 。 选 择 复 选 框 时 ,会 
将 一 个 name/value 对 与 form 一 起 提交 。 表 2-18 列 出 了 checkbox 元 素 的 属性 。 
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表 2-18 复 选 框 属性 


B 性 说 BB 
checked 此 属性 设置 复 选 框 被 选中 
name 此 属性 设置 复 选 框 的 名 称 
Value 此 属性 设置 复 选 框 的 值 

示例 2-3: 
<head> 
<title> 复 选 框 示 例 </title> 
</head> 
<body> 
<p> 请 选择 你 的 爱好 : </p> 
<p> 


<input type="checkbox" name="testl" value="A1"> 上 网 
<input type="checkbox" name="test2" value="A2" checked> 游 泳 
<input type="checkbox" name="test3" value="A3"> 登 山 
<input type="checkbox" name="test4" value="A4"> 写 作 
</p> 
</body> 
</html> 


在 表单 中 添加 复 选 框 的 效果 如 图 2-6 所 示 。 


请 选择 你 的 爱好 
口上 网 区 游泳 口 登山 口 写作 


[ | J Wy Computer 
图 2-6 在 表单 中 添加 复 选 框 的 效果 


234 普通 按钮 (button) 


普通 按钮 元 素 创建 按钮 button 的 属性 如 表 2-19 所 示 。 
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表 2-19 button 按钮 属性 


说 
此 属性 设置 或 检索 控件 的 名 称 

此 属性 设置 按钮 的 类 型 ， 可 选 定 的 值 有 : button, submit, reset 
此 属性 设置 显示 在 按钮 上 的 初始 值 


明 


name 


type 


例如 ， 在 示例 2-1 中 插入 以 下 代码 可 以 创建 普通 按钮 。 
<input type="button" name="bl" value=" 这 是 普通 按钮 "> 
效果 如 下 所 示 。 
这 是 普通 按钮 
2.3.5 ”提交 按钮 (submit) 
元 素 submit 用 于 创建 提交 按钮 。 当 用 户 单 击 “ 提 交 ” 按 钮 时 ， 表 单 就 会 被 提交 


至 form 中 所 指定 的 提交 地 址 。 
例如 ， 在 示例 2-2 中 插入 以 下 代码 ， 即 可 创建 提交 按钮 : 


<input type="submit" name="b2" value=" 提 交 表 单 "> 


在 表单 中 添加 提交 按钮 的 效果 如 图 2-7 所 示 。 


D MD SEV KAW IRD 


Ow- O- mil Om Je? 
Qm O RASP 
登录 页 面 


APE: 
EB 
性 a c5 cx 


COO Í | [hy Copter 


图 2-7 在 表单 中 添加 提交 按钮 的 效果 
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236 ” 重 置 按钮 (reset) 


TA reset 用 于 创建 重 置 按钮 。 当 用 户 单 击 此 按钮 时 ,此 重 置 按钮 所 在 表单 中 的 
所 有 元 素 的 值 被 重 置 为 其 value 属性 中 指定 的 初始 值 。 
例如 ， 在 示例 2-2 已 有 代码 的 基础 上 插入 以 下 代码 ， 即 可 创建 重 置 按钮 ; 


<input type="reset" name="b3" value=" 重 新 填写 "> 


创建 重 置 按钮 后 的 效果 如 图 2-8 所 示 。 
文件 中 py IRAV 帮助 0D 
Qn, O AAA 
登录 页 面 
用 户 名 [ 


密码 [ | 

性 别 c3 cx 

amas | 

Bs O [ [jacea O O O A 
图 2-8 重 置 按 钮 的 效果 


El 


237 ”隐藏 域 (hidden) 


表单 中 的 隐藏 域 主要 用 来 传递 一 些 参数 ， 而 这 些 参数 不 需要 在 页 面 中 显示 。 当 
浏览 者 提交 表单 时 ， 隐 藏 域 的 内 容 会 被 一 起 提交 给 处 理 程序 。 

创建 隐藏 域 的 语法 如 下 : 

input type="hidden" name=" 隐 藏 域名 称 " value=" 提 交 的 值 " 

如 下 列 代码 所 示 。 


示例 2-4: 


<html> 
<head> 
<title> 隐 藏 域 和 action 属性 对 比 示 例 </title> 
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</head> 

<body> 

<form name="exam5" action="exam1.htm" method="get"> 
下 面 是 几 种 不 同属 性 的 文本 字段 : 
<p> 姓 名 : <input type="text" name="username" size=15></p> 
<p> 年 龄 : <input type="text" name="age" size=15 maxlength=3></p> 
<p><input type="hidden" name="page_id" value="example"></p> 
<p><input type="submit" name="Submit" value=" 提 交 "></p> 

</form> 

</body> 

</html> 


运行 这 段 代码 时 ， 隐 藏 域 的 内 容 并 不 会 显示 在 页 面 中 ， 但 是 在 提交 表单 时 ， 其 
名 称 page_id 和 取 值 example 将 会 被 同时 传递 给 处 理 程序 。 

在 这 里 , 我们 来 对 比 一 下 method 属性 中 的 get 方式 和 post 方式 的 区 别 。 以 上 代 
码 显示 的 效果 如 图 2-9 所 示 。 


XAD 编辑 到) FEV KEW IAV WHU 


Om O ili Om E 


下 面 是 几 种 不 同属 性 的 文本 字段 ， 


2-9 ”隐藏 域 示 例 


此 时 ，method 指定 的 是 get 方法 ，action 指定 的 是 一 个 空 页 面 ， 单 击 “ 提 交 ” 按 
钮 ， 出 现 的 效果 如 图 2-10 所 示 。 


py == =s Er 
Qa- O- h)a | ma Yema Oo 2 ag J 


HED [E] fi16 /7//C /HtnlSite/ exonl hta?uses 


地 址 栏 中 会 显示 用 户 在 图 2-9 中 输入 的 表 
单 值 以 及 代码 中 隐藏 域 的 value 值 
EEE My Computer 
图 2-10 当 method 属性 为 get 时 的 效果 
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大 家 可 以 试 一 下 ,把 method 的 值 改 为 post， 在 地 址 栏 中 会 出 现 什么 效果 ， 此 处 
PERR. 


2.3.8 文件 域 (file) 


在 上 传 文件 时 常常 会 用 到 文件 域 ， 它 用 于 查找 硬盘 中 的 文件 路 径 ， 然 后 通过 表 
单 将 选中 的 文件 上 传 。 在 设置 电子 邮件 的 附件 、 上 传 头像 、 发 送 文件 时 ， 常 常会 看 
到 这 一 控件 。 

创建 文件 域 的 语法 如 下 : 


<input type="file" name=" 文 件 域 的 名 称 "> 
示例 2-5: 


<html> 
<head><title> 文 件 域 示例 </title></head> 
<body> 
<form action="mailto:yu@163.com" name="research" method="post"> 
下 面 是 某 网 站 的 注册 页 面 : 
<p> 用 &nbsp:&nbsp: 户 &nbsp:&nbsp: 名 :<input name="username" type="text" size=20></p> 
<p> 密 &nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 码 :<input name="passwordl" 
type="password" size=20></p> 
<p> 请 上 传 你 的 头像 : <input type="file" name="picture"></p> 
</form> 
</body> 
</html> 


运行 后 的 效果 如 图 2-11 所 示 。 


XD SED HEV VRO #90 
O-O- AA Ale um ”" wa” 
下 面 是 革 网 站 的 注册 页 面 ， 7 
用 户 名 [一 

= # — o 

CTT wa 


SE [ Í Í N [Ei Copter 
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单 击 “ 浏 览 ” 按 钮 后 ， 会 弹出 如 图 2-12 所 示 的 对 话 框 。 


a80: ss J |-easgm 


文件 名 加: 


j z] 
xeso: [areo 可 
图 2-12 “选择 文件 ”对 话 框 


2.3.9 ”菜单 列表 类 表单 元 素 (select) 


select 元 素 用 于 显示 下 拉 列 表 。 每 个 选项 由 一 个 option WARR, select 必须 包 
含 至 少 一 个 option 元 素 。 用 户 所 选择 的 选项 将 用 高 亮 显 示 块 表 示 。 表 2-20 列 出 了 
select 元 素 的 属性 。 


表 2-20 select 下 拉 列 表 属 性 


指定 元 素 的 名 称 ， 提 交 表 单 时 ， 会 将 name 属性 与 所 选 定 的 值 一 并 提交 


在 有 多 种 选项 可 供用 户 滚动 查看 时 ，size 确定 列表 中 可 同时 查看 到 的 行 数 
表示 在 列表 中 可 以 选择 多 项 


示例 2-6: 


<html> 

<head> 

<title> 注 册页 面 </title> 

</head> 

<body> 

<form name="research" method="post" action="mailto:www@163.com"> 
<p> 注 册页 面 </p> 
<p> 用 户 名 : <input type="text" name="username" value="" size="15"> 
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<p> 密 ” 码 : <input type="password" name="psd" size="15" maxlength="6"> 
<p> 性 BJ: 
<input type="radio" name="sex" value="male"> 男 
<input type="radio" name="sex" value="female"> 女 
<p> 证 件 类 型 
<select name="cardtype"> 
<option value="id_card"> 身 份 证 </option> 
<option value="stu_card"> 学 生 证 </option> 
<option value="drive_card"> 驾 驶 证 </option> 
<option value="other_card"> 其 他 证 件 </option> 
</select> 
<p> 关 心 的 栏目 
<select name="content" size="3" multiple> 
<option value="m1"> 体 育 栏目 </option> 
<option value="m2"> 科 技 栏目 </option> 
<option value="m3"> 新 闻 栏 目 </option> 


<option value="m4"> 汽 车 栏目 </option> 
<option value="m5"> 房 产 栏目 </option> 
</select> 


<p> 
<input type="submit" name="b2" value=" 提 交 表 单 "> 
<input type="reset" name="b3" value=" 重 新 填写 "> 

</form> 

</body> 

</html> 


运行 代码 后 的 效果 如 图 2-13 所 示 。 


Juman- a o 
XPO MU AD ET TAD Dw 


Qm- O- dm r SD-a Os zean ee 
lx 9 
BP2 
saD |] 
a cB ck 
证 件 类 型 aE 司 


EbEEEI 
关心 的 栏目 | 新 闻 栏目 到 
提交 表单 | 重新 填写 
DEJ 


图 2-13 添加 列表 项 
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2.3.10 文本 域 (textarea) 


元 素 textarea 用 于 创建 多 行文 本 输入 控件 。 此 元 素 使 用 结束 标记 </textarea> 结 
束 ， 在 <textarea> 和 </textarea> 之 间 的 内 容 是 该 多 行文 本 框 的 初始 值 。 表 2-21 列 出 了 
元 素 textarea 的 属性 。 


表 2-21 textarea 属性 


属 性 说 明 


设置 文本 区 域 的 名 称 


设置 文本 区 域 的 宽度 
设置 文本 区 域 包含 的 行 数 


例如 ， 在 HTML 的 代码 <body> 的 部 分 插入 如 下 代码 : 
您 的 意见 对 我 很 重要 
<textarea name="info" cols="35" rows="7"> 请 将 意见 输入 此 区 域 


</textarea> 


运行 后 的 效果 如 图 2-14 所 示 。 


您 的 意见 对 我 很 重要 
图 2-14 textarea 属性 运行 后 的 效果 


【小 结 】 


@ 表格 : <table>; 表格 元 素 : <tr>、<td>、<th>、<caption> 及 相应 属性 
° 使 用 表格 进行 页 面 布局 
° 表单 元 素 用 于 接受 用 户 输入 并 提供 一 些 交互 式 操作 
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@ <Form> 标 签 用 于 在 网 页 中 创建 表单 的 区 域 
© <Input> 元 素 用 于 定义 表单 上 的 表单 输入 元 素 , <Select> 用 于 定义 菜单 列表 类 
表单 元 素 ，<Textarea> 用 于 定义 多 行文 本 输入 框 


[ 自 测 题 】 


1. 根据 以 下 HTML 代码 进行 分 析 : 


<html> 
<head> 
<title> 表 格 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td>1</td> 
<td>2</td> 
</tr> 
<tr> 
<td colspan="2">3</td> 
</tr> 
</table> 
</body> 
</html> 


对 于 以 上 代码 ， 以 下 描述 正确 的 是 ( )e 
A. 该 网 页 内 容 的 第 一 行 显示 “表格 ” 

. 1 和 2 的 表格 在 同一 行 
C. 1 和 3 的 表格 被 合并 为 一 个 单元 格 
D. 1 和 3 的 表格 在 同一 行 

2.( ”) 标 签 用 于 在 网 页 中 创建 表单 。 


A. <Input> B. <Select> 


w 


C. <Form> D. <Option> 
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A. <select name="content" maxlength="3" >...... </select> 


B. <select name="content" height="3" >...... </select> 


=" 


C. <select name="content" size="3" >...... </select> 


D. <select name="content" width="3" >...... </select> 
4. 要 在 网 页 中 插入 密码 域 ， 并 且 输 入 的 密码 不 能 超过 6 位 ， 下 列 代码 正确 的 是 
( X 
A. <input type="password" size="6" > 
B. <input type="password" maxlength="6" > 
C. <input type="text" size="6" > 
D. <textarea maxlength="6"></textarea> 
5. 在 网 页 上 ， 当 表单 中 的 input 元 素 的 type 属性 为 reset 时 ， 是 用 于 创建 ( ) 
按钮 。 


提交 B. 重 置 
C. 普通 D. 以 上 都 不 对 


【上 机 部 分 】 


上 机 目标 


° 使 用 表格 设计 网 页 
° 使 用 表单 和 常用 HTML 输入 元 素 
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练习 1: 使 用 表格 布局 页 面 


【问题 描述 】 
使 用 表格 标签 创建 如 图 2-15 所 示 的 表格 。 


AERX - Microsoft Internet Explorer 
文件 (E) ”编辑 (E) FEV KAA 工具 (D 帮助 (H) 


HAR- > - @ 2 Q| AL arr ga Q| Q ad AA 
地 址 (D) [E] E: NET 网 页 设计 \ 第 二 章 \ 上 机 部 分 \ 第 一 部 分 \2-L htn 了 ] OPa | 链接” 


价格 
699 元 
850 元 


26B | 109936 
AAA8B1b. FM. USB2. 0 


2-15 ”使 用 表格 布局 页 面 


【问题 分 析 】 
首先 找 出 该 表格 的 行 数 和 列 数 ， 然 后 确定 每 行 所 包含 的 单元 格 个 数 。 
在 写 每 一 行 的 时 候 ， 要 确定 该 行 的 第 几 个 单元 格 需 要 合并 或 者 需要 被 合并 。 
可 以 看 到 每 个 单元 格 内 的 文字 都 是 居中 对 齐 的 。 使 用 单元 格 (而 不 是 表格 ) 的 
align=center 属性 居中 对 齐 。 
利用 理论 课 所 学 的 细 线 表格 知识 ， 先 设置 整个 表格 的 背景 颜色 ， 将 表格 边框 设 
为 0、 间距 设 为 1， 再 设置 每 一 行为 另外 一 种 背景 颜色 。 
【参考 步骤 】 
(1) 新 建文 本 文档 。 
(2) 书写 HTML 网 页 框架 : 
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<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=gb2312"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
> 
<table border="0" align="center" cellspacing="1" bgcolor="#999999"> 
<tr bgcolor="#FFFFFF"> 
<td colspan="5"><p align="center"> 价 格 表 </p></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td colspan="2"><p align="center">! 5 </p></td> 
<td><p align="center"> 容 量 </p></td> 
<td><p align="center"> 价 格 </p></td> 
<td width="78"><p align="center"> 变 化 </p></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td width="100" rowspan="3"><p align="center"><img src="xs.jpg" width="80" 
height="80"></p></td> 
<td width="100" rowspan="3"><p align="center">miniplayer </p></td> 
<td width="100"><p align="center">512MB </p></td> 
<td width="100"><p align="center">699 元 </p></td> 
<td><p align="center">— </p></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td width="100" ><p align="center">1GB </p></td> 
<td width="100" ><p align="center">850 元 </p></td> 
<td ><p align="center">— </p></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td width="100" ><p align="center">2GB </p></td> 
<td width="100"><p align="center">1099 元 </p></td> 
<td align="center"> 一 100 元 </td> 
</t> 
<tr bgcolor="#FFFFFF"> 
<td><p align="center"> 备 注 </p></td> 
<td colspan="4"><p align="center">AAA 电池 、FM、USB2.0 </p></td> 
</tr> 
</table> 
<p></p> 
</body> 
</html> 
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练习 2: 用 表单 和 表格 制作 注册 页 


【问题 描述 】 
为 了 使 表单 的 外 观 整齐 ， 在 实际 开发 中 ， 需 要 采用 表格 布局 来 排放 表单 元 素 ， 
如 图 2-16 所 示 。 


【问题 分 析 】 
表格 应 该 设置 10 行 2 列 ， 第 一 行 的 单元 格 占据 2 列 ( 跨 2 列 )。 
参考 代码 : 


<html> 
<head> 
<title> 表 格 和 表单 综合 应 用 </title> 
</head> 
<body bgcolor="#E7E7E7"> 
<form action="" method="post"> 
<table width="400" border="0" align="center"> 
<tr> <td colspan="2" align="center"> 申 请 表 </td></t> 
<tr> 
<td> 姓 名 </td> 
<td><input type="text" name="EName" size="20" maxlength="30" value="" /></td> 
<I> 
<tr> 
<td> 性 别 </td> 
<td><input type="radio" name="gender" value="male" checked/> 男 
<input type="radio" name="gender" value="female" /> 女 </td> 
</tr> 
<tr> 
<td> 教 育 程度 </td> 
<td><input type="checkbox" name="zhuanke"> 专 科 
<input type="checkbox" name="benke"> 本 科 
<input type="checkbox" name="shuoshi"> 硕 士 
<input type="checkbox" name="boshi"> 博 士 </td> 
</tr> 
<tr> 
<td> 月 薪 </td> 
<td><input type="text" name="textfield2" /></td> 


. 66 * 


第 2 章 表格 和 表单 


</tr> 
<t> 
<td> 附 注 </td> 
<td><textarea rows="3" cols="30"> 请 在 这 里 输入 附注 </textarea></td> 
</tr> 
<tr> 
<td> 国 籍 </td> 
<td><select name="select"> 
<option value="china"> 中 国 </option> 
<option value="american"> 美 国 </option> 
<option value="japan"> 日 本 </option> 
<option value="singapore"> 新 加 坡 </option> 
</select></td> 
</tr> 
<tr> 


<td><input type="submit" name="Submit" value=" 提 交 " /></td> 
<td><input type="reset" name="reset" value=" 重 置 " /></td> 
</tr> 
</table> 
</form> 


</body> 
</html> 


上 述 代 码 的 运行 结果 如 图 2-16 所 示 。 


E 848 RI TT -Microsoft Internet Explorer 


ere- +- Q02 AR uwr gn JD ad- = @ 


HEO [E] z wm 页 设计 \ 第 二 章 \ 上 机 部 分 \ 第 一 部 分 \-2_hta 了 ] ora | 链接 ” 
El 
申请 表 
ta he — 
性 别 ra 


教育 程度 上 专科 rp 硕士 严 博士 
月 薪 po 


附注 请 在 这 里 输入 附注 Ë 
国籍 PE = 
Z| 
i- 
[Eg [| í Banm A 


2-16 ”表单 和 表格 的 综合 应 用 
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练习 3: 使 用 表单 做 登录 系统 


【问题 描述 】 
练习 使 用 表单 ， 实 现 如 图 2-17 所 示 的 登录 页 面 。 邮 件 类 型 下 拉 菜 单 中 有 : 免费 
邮箱 、 任 你 邮 、U 币 、 会 员 中 心 几 个 选项 。 


免费 即 箱 登录 系统 


会 员 r PEAT 
s mw 
z 


图 2-17 登录 页 面 
练习 4: 做 一 个 个 人 简历 


【问题 描述 】 
利用 所 学 的 表格 知识 ， 做 一 个 如 图 2-18 所 示 的 个 人 简历 网 页 


DA ERRORE -Meroson Internet Doles 
ZEO RRO MEV KRA IRD EMI 
+=" +- GOA AR aa ER 
HBO fE) = VEHES ENBA -A/atal 7] osn wr 
AaS E 
m+. 年 的 
COTA RB: 
niti: as: 
CLECS miami 
RIBER T fF 5 
Atam, 
mem. 
工作 年 限 : mh 
RFAM: TERAS 
BDE: #ertez. 
MALMES: ” 
RARR 
EER: 
8325: EUA 
所 学 专业 一 FEL 
ABRENE. 
J 
a O emm P: 
图 2-18 个 人 简历 
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【问题 分 析 】 

这 个 表格 有 点 大 ， 只 用 一 个 表格 做 拆 分 、 合 并 操作 非常 复杂 ， 并 且 很 容易 影响 
表格 的 其 他 部 分 。 所 以 在 做 这 种 大 型 表格 的 时 候 ， 要 养 成 把 大 表格 拆 分 为 小 表格 的 
习惯 。 

可 以 把 整个 表格 分 为 3 个 小 表格 ， 分 别 对 应 基本 资料 、 求 职 意向 及 工作 经 历 、 
教育 背景 3 块 。 这 样 的 3 个 小 表格 之 间 互 相 不 影响 ,做 好 后 再 把 它们 并 排放 在 一 起 。 
为 使 页 面 美观 ， 每 个 表格 底部 留 一 个 空白 单元 格 (图 中 箭头 标 出 的 部 分 )。 

做 每 一 个 小 表格 的 时 候 ， 利 用 单元 格 的 边 距 、 间 距 结合 背景 颜色 的 使 用 ， 使 表 
格 美观 一 些 。 

3 个 小 表格 做 好 后 ， 如 果 我 们 一 个 一 个 让 它们 居中 对 齐 ， 不 仅 不 方便 ， 而 且 不 容 
易 对 它们 进行 整体 控制 。 解 决 这 个 问题 的 方法 是 写 一 个 一 行 一 列 且 边框 边 距 间距 均 
为 0 的 外 围 表格 ， 固 定 这 个 表格 的 大 小 和 位 置 ， 再 把 3 个 小 表格 放 进 来 ， 这 样 就 解 
决 了 3 个 小 表格 不 统一 的 问题 。 


[ 课 后 作业 】 


1. 练习 如 图 2-19 所 示 的 常用 的 调查 报告 表单 。 


下 面 是 某 网 站 的 调查 报告 
登录 用 户 名 : 
登录 密码 : 


调查 县 体内 容 : 

出 生年 月 [Pez] 年 [oz] 月 z] 日 

所 在 城市 : c 武汉 c 上 海 e 北京 c 深圳 c 其 他 
爱好 : r 上 网 F 写作 8 BE r 作 诗 区 唱歌 


2-19 ” 某 网 站 调查 报告 
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姓名 EGE== 二 3 
公司 Ee 
地 址 q 
国家 FPE] 
会 员 类 型 c 个 人 c 公司 c 组 织 
邮寄 信息 方式 r 电子 邮件 r (tr 
密码 == 
电子 邮件 地 址 = 
是 否 需要 广告 信息 c E c 6 
| 
图 2-20 注册 页 面 
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了 解 CSS 的 概念 
掌握 CSS 的 基本 语法 
掌握 如 何 使 用 样式 表 
了 解 <DIV> 和 <SPAN> 标 签 
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Y 
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SpA 

随 着 网 页 设计 技术 的 发 展 ， 人们 已 经 渐渐 不 满足 原 有 的 一 些 HTML 标记 ， 而 是 
希望 能 够 为 页 面 内 容 添加 一 些 更 加 绚丽 的 属性 ， 如 鼠标 标记 、 渐 变 效果 等 。CSS 技 
术 的 发 展 使 这 些 变 成 了 现实 。 


3.1 CSS 语法 结构 


CSS 语法 结构 如 下 : 
选择 器 { 样式 属性 : 属性 值 : 样式 属性 : 取 值 : } 


其 中 ， 选 择 器 可 以 是 多 种 形式 的 ， 例 如 ， 要 定义 HTML 标记 中 H2 的 样式 ， 可 
以 使 用 以 下 代码 : 


3.1.1 CSS 属性 与 选择 器 ( 仅 保留 3 个 主要 的 选择 器 ) 
CSS 的 属性 很 多 ， 可 以 从 网 上 查阅 相关 资料 。 表 3-1 列 出 了 常用 的 CSS 属性 。 


表 3-1 常用 的 CSS 属性 


属 性 CSS 名 称 说 明 
font-family 设置 或 检索 文本 的 字体 
font-size 设置 或 检索 文本 字体 的 大 小 
设置 或 检索 文本 的 字体 样式 ， 即 字体 风格 ， 主 要 
字体 属性 font-style 设置 字体 是 否 为 斜体 。 取 值 范围 : 


normal | italic | oblique 
用 于 设置 字体 的 粗细 ， 取 值 范 围 : 
Normal | bold | bolder | lighter | number 


font-weight 
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属 性 CSS 名 称 


( 续 表 ) 
说 明 


color 


设置 文本 的 颜色 


颜色 及 背景 属性 background-color 


background-image 


text-align 


设置 背景 颜色 

设置 元 素 的 背景 图 像 

设置 文本 的 对 齐 方式 ， 如 : 左 对 齐 、 右 对 齐 、 居 
中 对 齐 、 两 端 对 齐 


文本 属性 


text-indent 


设置 文本 第 一 行 的 缩 进 量 ， 取 值 可 以 是 一 个 长 度 
或 一 个 百分比 


vertical-alig 


border-style 
" border-width 
边框 属性 


border-color 


border-left 


尺寸 及 定位 属性 


position 


设置 文本 的 纵向 位 置 

设置 边框 的 样式 

设置 边框 的 宽度 

设置 边框 的 颜色 

设置 左边 框 的 属性 

设置 元 素 的 宽度 

设置 元 素 的 高 度 

定位 元 素 的 左边 距 

定位 元 素 的 项 边 距 

设 定 浏览 器 如 何 来 定位 元 素 , absolute 表示 绝对 定位 ， 
需要 同时 使 用 left, right, top, bottom 等 属性 进行 绝 
对 定位 

设置 层 的 层 登 先后 顺序 和 覆盖 关系 


CSS 选择 器 大 致 可 分 为 ， 元素 选择 器 、Class 选择 器 、ID 选择 器 等 。 下 面 将 逐 


一 讲解 这 几 种 主要 的 选择 器 。 


3.1.2 “元素 选择 器 


最 常见 的 CSS 选择 器 是 元 素 选 择 器 。 换 句 话 说 , 文档 的 元 素 就 是 最 基本 的 选择 
器 。 如 果 设 置 HTML 的 样式 ， 选 择 器 通常 将 是 某 个 HTML 元 素 ， 比 如 p、hl、em、 


a， 甚 至 可 以 是 HIML 本 身 : 


<html> 
<head> 
<style type="text/css"> 
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html {color:black:} 
hl {color:blue:} 
h2 {color:silver:} 
</style> 
</head> 
<body> 
<h1l> 这 是 heading 1</h1> 
<h2> 这 是 heading 2</h2> 
<p> 这 是 一 段 普通 的 段落 。</p> 
</body> 
</html> 


在 浏览 器 中 的 输出 结果 如 图 3-1 所 示 。 


文件 (E) MKO EEY KRA IAD Wb) 
ece- a- OAA ARE ura TN | -3 22 
HRED fE) E: \MTWLP 页 设计 \ 第 三 章 \ 理 论 \3-1. htnl 


这 是 heading 1 


这 是 一 段 普通 的 段落 。 


3-1 使 用 HTML 选择 器 


在 W3C 标准 中 , 元 素 选择 器 又 称 为 类 型 选择 器 (type selector)。 类 型 选择 器 匹配 
文档 语言 元 素 类 型 的 名 称 ， 也 匹配 文档 树 中 该 元 素 类 型 的 每 一 个 实例 。 
下 面 是 规则 匹配 文档 树 中 的 所 有 hl 元 素 : 


hl {font-family: sans-serif:} 


因此 ， 我 们 也 可 以 为 XML 文档 中 的 元 素 设置 样式 。 
XML 文档: 


<?xml version="1.0" encoding="ISO-8859-1"?> 
<?xml-stylesheet type="text/css" href="note.css"?> 
<note> 

<to>George</to> 

<from>John</from> 
<heading>Reminder</heading> 
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<body>Don't forget the meeting!</body> 
</note> 
hl {font-family: sans-serif:} 


CSS 文档 : 


note 
{ 
font-family:Verdana, Arial: 
margin-left:30px: 
} 

to 
{ 
font-size:28px: 
display: block: 
; 

from 
t 
font-size:28px; 
display: block; 
) 

heading 
í 
color: red; 
font-size:60px: 
display: block: 
} 

body 
Í 
color: blue: 
font-size:35px: 
display: block: 
} 


通过 上 面 的 例子 可 以 看 出 , CSS 元 素 选择 器 (类 型 选择 器 ) 可 以 设置 XML 文档 中 
元 素 的 样式 。 
在 浏览 器 中 的 输出 结果 如 图 3-2 所 示 。 
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3.1.3 群 组 选择 器 


假设 希望 h2 元 素 和 段落 都 有 灰色 , 为 达到 这 个 目的 , 最 容易 的 做 法 是 使 用 以 下 
声明 : 


h2, p {color:gray:} 


将 h2 和 Pp 选择 器 放 在 规则 左边 , 然后 用 逗号 分 隔 , 就 定义 了 一 个 规则 。 其 右边 
的 样式 (color:gray;) 将 应 用 到 这 两 个 选择 器 所 引用 的 元 素 。 喜 号 告诉 浏览 器 ， 规 则 中 
包含 两 个 不 同 的 选择 器 。 如 果 没 有 这 个 逗号 ， 那 么 规则 的 含义 将 完全 不 同 ， 请 参见 
后 代 选 择 器 。 可 以 将 任意 多 个 选择 器 分 组 在 一 起 ， 对 此 没有 任何 限制 。 

例如 ， 如 果 用 户 想 把 很 多 元 素 显示 为 灰色 ， 可 以 使 用 类 似 如 下 的 规则 : 


body. h2, p. table, th, td, pre, strong, em {color:gray:} 


通过 分 组 ， 可 以 将 某 些 类 型 的 样式 “压缩 ”在 一 起 ， 这 样 就 可 以 得 到 
更 简洁 的 样式 表 。 


以 下 两 组 规则 能 得 到 同样 的 结果 ,不 过 可 以 很 清楚 地 看 出 哪 一 个 写 起 来 更 容易 : 
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hl {color:blue;} 
h2 {color:blue:} 
h3 {color:blue:} 
h4 {colorblue:} 
h5 {color:blue;} 
h6 {color:blue;} 


h1, h2, h3, h4, h5, h6 {color:blue;} 


3.1.4 包含 选择 器 


包含 选择 器 又 称 后 代 选 择 器 ， 后 代 选 择 器 可 以 选择 作为 某 元 素 后 代 的 元 素 。 

我 们 可 以 定义 后 代 选 择 器 来 创建 一 些 规则 ， 使 这 些 规则 在 某 些 文档 结构 中 起 作 
用 ， 而 在 另外 一 些 结构 中 不 起 作用 。 

例如 ， 如 果 用 户 希 望 只 对 hl 元 素 中 的 em 元 素 应 用 样式 ， 可 以 这 样 写 : 


hl em {color:red:} 


上 面 这 个 规则 会 把 作为 hl 元 素 后 代 的 em 元 素 的 文本 变 为 红色 ， 而 其 他 em 文 
本 (如 段落 或 块 引用 中 的 em) 则 不 会 被 这 个 规则 选中 : 


<h1>This is a <em>important</em> heading</h1> 
<p>This is a <em>important</em> paragraph</p> 


HAR, 用户 也 可 以 在 hl 中 找到 的 每 个 em 元 素 上 放 一 个 class 属性 ， 显 而 易 见 ， 后 
代 选 择 器 的 效率 更 高 。 


3.1.5 CLASS Z ID 选择 器 


1. CLASS 选择 器 


如 果 有 两 个 不 同类 别 的 标签 ， 如 <P> 和 <H2> 标 签 ， 它 们 都 采用 了 相同 的 样式 ， 
如 何 允许 它们 也 共享 同一 样式 呢 ? 此 时 ， 可 以 采用 CLASS 类 选择 器 。 


ea 77。 
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CLASS 类 选择 器 的 定义 格式 如 下 : 


-类 名 

{ 

样式 属性 : 取 值 ; 
样式 属性 : 取 值 ; 


类 名 前 面 有 一 “.” 号 ， 类 的 名 称 可 以 是 任意 英文 单词 ， 或 以 英文 开头 
与 数字 的 组 合 ， 一 般 以 其 功能 和 效果 简要 命名 。 


但 是 ， 与 直接 定义 HTML 中 的 标记 样式 不 同 的 是 : 这 段 代 码 仅仅 定义 了 样式 ， 
并 没有 应 用 样式 ， 如 果 要 应 用 样式 中 的 某 个 类 ， 还 需要 在 正文 中 添加 如 下 代码 : 


<P CLASS=" 类 名 ">.……</P> 
<H2 CLASS=" 类 名 ">.……</H2> 


如 下 示例 定义 了 “text” 类 选择 器 。 


<html> 

<head> 

<title> 内 顽 样式 表 类 选择 器 示例 </title> 
<style type="text/css"> 
<!-- 

.text{ 

font-family: 隶 书 : 
text-decoration:underline: 
) 

</style> 

</head> 


<body> 

<h2 class="text"> 梅 花 一 一 花 中 君子 </h2> 
<p>&nbsp:&nbsp:&nbsp:&nbsp: 梅 花 树 的 枝 干 不 是 很 粗 ， 但 长 得 很 独特 。 它 们 很 少 像 其 他 树 
的 枝 干 那样 笔直 地 伸展 开 ,而 多 是 曲 曲折 折 、 盘 旋 而 上 。 每 年 大 地 将 要 复苏 时 ， 深 褐色 的 老 
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枝 上 便 会 抽出 一 些 挺拔 的 新 枝 。</p> 

<p class="text">&nbsp;&nbsp;&nbsp:&nbsp: 梅 花 的 种 类 很 多 ， 有 白 如 雪 的 白梅 ， 有 粉 如 起 的 
宫 粉 梅 ， 有 晶莹 如 玉 的 绿 苯 梅 .……</p> 

</body> 

</html> 


在 浏览 器 中 查看 该 HTML 页 面 时 ， 其 输出 结果 如 图 3-3 所 示 。 
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梅花 一 一 花 中 君子 

桥 花 树 的 被 干 不 是 很 类 ， 但 长 得 很 独特 。 它 们 根 少 像 其 他 衬 的 被 干 那样 笔直 
地 伸 形 开 ， 而 多 是 曲 曲折 折 、 益 旋 而 上 。 每 年 大 地 将 要 复苏 时 ， 深 褐色 的 老 梳 上 
便 会 抽出 一 些 挺拔 的 新 核 。 


糙 花 的 种 类 很 多 ， 有 白 如 要 的 白梅 ; 有 和 粉 如 起 的 富 粉 梅 ; JW dh SË: 30 = 69 
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图 3-3 类 选择 器 示例 


<H2> 和 第 二 个 <P> 标 签 都 采用 了 text 类 选择 器 , 所 以 字体 为 隶书 , 并 带 下 划 线 。 
而 第 一 个 <P> 标 签 没有 采用 任何 样式 ， 所 以 按 默 认 样 式 显示 。 

由 此 例 可 以 看 出 ， 不 同类 别 的 标签 可 以 使 用 同一 类 选择 器 ， 同 一 类 的 标签 也 可 
以 采用 不 同 的 类 选择 器 ， 类 选择 器 实现 了 样式 的 灵活 共享 。 

2.1D 选择 器 


ID 选择 器 使 用 HTML 元 素 的 ID 属性 。 
ID 选择 器 的 定义 格式 如 下 : 


: ID 名 前 面 有 “# 号 ，ID 的 名 称 可 以 任意 取 名 ， 但 在 整个 网 页 中 必须 
1 唯一， 不 能 重 名 。 
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如 果 某 个 标签 希望 采用 该 ID 选择 器 的 样式 ， 其 语法 格式 为 : 


如 下 示例 定义 了 “text” 类 选择 器 。 


<html > 

<head> 

<title>ID 选择 器 示例 </title> 

<style type="text/css"> 

<!-- 

#text{ 

font-family: P; 

text-decoration:underline; 

) 

</style> 

</head> 

<body> 

<h2 ID="text"> 梅 花 一 一 花 中 君子 </h2> 

<p ID="text">&nbsp:&nbsp:&nbsp:&nbsp: 梅 花 树 的 枝 干 不 是 很 粗 ， 但 长 得 很 独特 。 它 们 很 少 
像 其 他 树 的 枝 干 那样 笔直 地 伸展 开 ， 而 多 是 曲 曲折 折 、 盘 旋 而 上 。 每 年 大 地 将 要 复苏 时 ， 深 
褐色 的 老 枝 上 便 会 抽出 一 些 挺拔 的 新 枝 。</p> 

<p >&nbsp:;&nbsp:&nbsp:&nbsp: 梅 花 的 种 类 很 多 ， 有 白 如 雪 的 白梅 ， 有 粉 如 霞 的 宫 粉 梅 ， 有 
晶莹 如 玉 的 绿 昔 梅 ……</p> 

</body> 

</html> 


在 浏览 器 中 查看 该 HTML 页 面 时 ， 其 输出 结果 如 图 3-4 所 示 。 


XPD RED FEV BEW IAV #Q | & 
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梅花 村 的 校 干 不 是 很 程 ， 但 长 得 很 独特 。 它们 很 少 停 其 
他 桂 的 枝 干 蓝 样 笔直 地 伸展 开 ， 而 多 是 曲 曲折 折 、 盘 旅 而 
E 每 年 大 地 将 受 复 芬 时 ，。 深 神 仿 的 老 枝 上 便 合 抽出 一 些 把 
ikast. 
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3-4 使 用 ID 选择 器 
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由 于 ID 选择 器 的 功能 与 CLASS 选择 器 一 样 ， 并 且 有 时 容易 与 HTML 标签 的 
“ID” 属 性 相 冲 突 ， 所 以 一 般 不 推荐 使 用 。 


3.1.6 子 元 素 选 择 器 


子 元 素 选 择 器 (Child selectors) 只 能 选择 作为 某 元 素 子 元 素 的 元 素 (IE 6 不 支持 子 
元 素 选择 器 )。 

如 果 用 户 不 希望 选择 任意 的 后 代 元 素 ， 而 是 希望 缩小 范围 ， 只 选择 某 个 元 素 的 
子 元 素 ， 请 使 用 子 元 素 选择 器 。 

例如 ， 如 果 用 户 希望 选择 只 作为 hl 元 素 子 元 素 的 strong 元 素 ， 可 以 这 样 写 : 


h1 > strong {color:red:} 
这 个 规则 会 把 第 一 个 hl 下 面 的 strong 元 素 变 为 红色 ,但 是 第 二 个 strong 不 受 影响 ， 


<h1>This is <strong>very</strong> important.</h1> 
<h1>This is <em>really <strong>very</strong></em> 
important.</h1> 


3.1.7 ” 相 邻 兄弟 选择 器 


如 果 需 要 选择 紧 接 在 另 一 个 元 素 后 的 元 素 ， 而 且 两 者 有 相同 的 父 元 素 ， 可 以 使 
用 相 邻 兄弟 选择 器 (Adjacent sibling selector) 
例如 ， 如 果 要 增加 紧 接 在 hl 元 素 后 出 现 的 段落 的 上 边 距 ， 可 以 这 样 写 : 


hl +p {margin-top:50px:} 
这 个 选择 器 读 作 : “选择 紧 接 在 hl 元 素 后 出 现 的 段落 , hl 和 p 元 素 拥 有 共同 的 父 
元 素 ”。 


请 看 下 面 的 文档 树 片段 : 


<div> 
<ul> 
<li>List item 1</li> 
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<li>List item 2</li> 
<li>List item 3</li> 
</ul> 
<ol> 
<li>List item 1</li> 
<li>List item 2</li> 
<li>List item 3</li> 
</ol> 
</div> 
在 上 面 的 片段 中 ，div 元 素 包含 两 个 列表 : 一 个 无 序列 表 ， 一 个 有 序列 表 。 每 个 
列表 都 包含 3 个 列表 项 ， 这 两 个 列表 是 相 邻 兄 弟 ， 列 表 项 本 身 也 是 相 邻 兄弟 。 不 过 ， 
第 1 个 列表 中 的 列表 项 与 第 2 个 列表 中 的 列表 项 不 是 相 邻 兄弟 ， 因 为 这 两 组 列表 项 
不 属于 同一 父 元 素 (最 多 只 能 算 堂 兄弟 )。 
请 记 住 ， 用 一 个 结合 符 只 能 选择 两 个 相 邻 兄弟 中 的 第 2 个 元 素 。 请 看 下 面 的 选 
择 器 : 
li + li {font-weight:bold:} 
上 面 这 个 选择 器 只 会 把 列表 中 的 第 2 个 和 第 3 个 列表 项 变 为 粗 体 ， 第 一 个 列表 
项 不 受 影响 。 
相 邻 兄弟 结合 符 还 可 以 结合 其 他 结合 符 : 
html > body table + ul {margin-top:20px:} 


这 个 选择 器 解释 为 ， 选择 紧 接 在 table 元 素 后 出 现 的 所 有 兄弟 ul 元 素 ， 该 table 
元 素 包含 在 一 个 body 元 素 中 ，body 元 素 本 身 是 html 元 素 的 子 元 素 。 


34.8 伪 类 及 伪 对 象 


还 有 一 种 特殊 的 用 法 ， 就 是 指定 某 个 标签 的 个 别 属性 的 样式 ， 许 多 资料 上 也 称 
为 “ 伪 类 ”选择 器 。 常 见 的 应 用 就 是 超 链 接 ， 超 链接 最 初 不 带 下 划 线 ， 当 用 户 将 鼠 
标 指针 移动 至 超 链 接 的 上 方 时 ， 便 会 显示 红色 的 下 划 线 ， 当 用 户 点 击 时 超 链接 又 变 
成 绿色 ， 并 且 变 得 没有 下 划 线 。 代 码 如 下 所 示 ， 效 果 如 图 3-5 一 图 3-7 所 示 。 
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<html> 

<head> 

<title> 无 标题 文档 </title> 

<style type="text/css"> 

af ”/* 设置 超 链接 不 带 下 划 线 ，text-decoration 表示 对 文本 修饰 */ 
color:blue: 

text-decoration:none: 

} 

a:hover{ /* 鼠标 指针 在 超 链接 上 悬 停 时 ， 带 下 划 线 */ 
color:red; 

text-decoration:underline; 

} 

aactive{ /* 活动 链接 时 ， 颜 色 为 绿色 ， 并 不 带 下 划 线 */ 
color:green; 

text-decoration:none; 

j 

</style> 

</head> 

<body> 

<a href="http://www.163.com"> 我 是 超 链接 ， 移 过 来 后 再 点 击 我 试 试看 </a> 
</body> 

</html> 


HHO [Ë E:yrywebtatest. hem z) era we” 
我 是 超 链接 , 移 过 来 后 再 点 击 我 试 试看 


图 3-5 不 带 下 划 线 的 超 链接 
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3-6 ”鼠标 指针 悬 停 时 显示 下 划 线 
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图 3-7 点 击 鼠 标 时 不 带 下 划 线 


伪 对 象 也 叫 伪 元 素 ， 用 于 给 某 些 选择 器 设置 特殊 效果 。 
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伪 元 素 的 语法 如 下 : 
selector:pseudo-element {property:value;} 
CSS 类 也 可 以 与 伪 元 素 配合 使 用 : 
selector.class:pseudo-element {property:value:} 


:first-line 伪 元 素 
"first-line" 伪 元 素 用 于 给 文本 的 首 行 设置 特殊 样式 。 
在 下 面 的 例子 中 , 浏览 器 会 根据 “first-line” 伪 元 素 中 的 样式 对 p 元 素 的 第 一 行 


文本 进行 格式 化 : 


p:first-line 

í 

color:#ff0000; 
font-variant:small-caps: 


} 
伪 元 素 可 以 与 CSS 类 配合 使 用 : 
下 面 的 例子 会 使 所 有 class 为 article 的 段落 的 首 字 母 变 为 红色 。 


p-article:first-letter 


í 
color: #FF0000: 


j; 


<p class="article">This is a paragraph in an article, </p> 


可 以 结合 多 个 伪 元 素来 使 用 。 
在 下 面 的 例子 中 ， 段 落 的 第 一 个 字母 将 显示 为 红色 ， 其 字体 大 小 为 xx-large。 


第 一 行 中 的 其 余 文 本 将 为 蓝 色 ， 并 以 小 型 大 写字 母 显 示 。 段 落 中 的 其 余 文 本 将 以 默 
认 字 体 大 小 和 颜色 来 显示 。 


p:first-letter 
í 
color:#ff0000: 
font-size:xx-large: 
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p:first-line 
í 
color:#0000ff, 
font-variant:small-caps; 
Bb 


3.1.9” 通 配 选 择 器 


和 很 多 语言 一 样 ，“*” 这 个 符号 在 CSS 里 代表 所 有 ， 即 通 配 选 择 器 。 
例如 : 


*{ font-size: 12px; } 


该 例 表 示 将 网 页 中 所 有 元 素 的 字体 定义 为 12 像素 ,当然 ， 这 仅 是 举 个 例子 ， 一 
般 不 会 做 这 么 极端 的 定义 。 
在 实际 应 用 中 ， 下 面 的 情况 比较 常见 
A 
margin: 0: 


padding: 0; 
} 


这 个 定义 的 含义 是 将 所 有 元 素 的 外 边 距 和 内 边 距 都 定义 为 0， 而 在 具体 需要 设 
定 内 外 边 距 的 时 候 ， 再 具体 定义 。 从 这 个 例子 可 以 看 出 ， 通 配 选择 器 的 作用 更 多 是 
用 于 对 元 素 的 一 种 统一 预 设 定 。 

通 配 选 择 器 也 可 以 用 于 选择 器 组 合 中 : 


div *{ color: #FF0000: } 


该 例 表 示 在 <div> 标 签 内 的 所 有 字体 颜色 为 红色 。 
有 一 种 例外 的 情况 : 


body *{ font-size:120%: } 


这 时 候 它 表示 相 乘 ， 当然 body 也 可 以 换 成 别 的 选择 器 标签 。 由 于 这 种 效果 取决 
的 因素 较 多 ， 一 般 不 常 使 用 。 
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3.2 将 Css 应 用 于 网 页 


根据 样式 代码 的 位 置 不 同 ， 可 以 将 样式 分 为 三 类 : 
° 行内 样式 表 
° 内 部 样式 表 
。 外 部 样式 表 


3.2.1 行内 样式 表 


如 果 希 望 某 段 文字 和 其 他 段落 文字 的 显示 风格 不 一 样 ， 那 么 采用 “行内 样式 ” 
比较 合适 。 

行内 样式 使 用 元 素 标 签 的 STYLE 属性 定义 ， 例 如 ， 两 段 文 字 需 要 采用 不 同 的 字 
体 显 示 ， 如 图 3-8 所 示 ， 则 可 在 标签 内 加 上 “style” 属 性 ， 如 下 所 示 。 


<html> 
<head> 
<title> 行 内 样式 表示 例 </title> 
</head> 


<body> 
<p style="font-family: 华 文 彩云 :"> 庐 山 美 景 一 一 小 天 池 </p> 
<p style="font-weight:bold"> 小 天 池 位 于 庐山 特 岭 北面 ， 池 中 之 水 置 于 高 山 而 终年 不 滋 不 润 。 


池 后 山大 上 ， 屹 立 着 一 座 白 塔 似 的 喇嘛 塔 。 塔 建 于 1936 年 。 小 天 池 山 对 面 还 有 一 怪 石 ， 远 
望 似 一 雄 座 伸 颈 欲 鸣 。</p> 


</body> 
</html> 
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从 上 面 的 示例 可 以 看 出 ， 行 内 样式 就 是 修饰 某 个 标签 ， 规 定 的 样式 只 对 所 修饰 
的 标签 有 效 。 如 此 例 中 分 别 规定 了 两 个 <P> 标 签 的 样式 。 

这 种 方法 简单 有 效 ， 适 合 于 单个 标签 。 但 是 ， 如 果 有 许多 同类 的 标签 ， 如 都 是 
<P> 标 签 , 希望 采用 同一 样式 , 那么 , 如 果 在 每 个 <P> 标 签 内 都 加 上 重复 的 样式 代码 ， 
将 比较 麻烦 。 这 时 可 以 采用 内 购 样 式 ， 即 把 样式 统一 放置 在 <HEAD> 标 签 内 。 


32.2 ”内 部 样式 表 


内 部 样式 表 ( 内 嵌 样 式 表 ) 也 称 为 嵌入 样式 表 ， 它 放置 在 <ZHEAD> 标 签 内 ， 格 式 
如 下 : 


<HEAD> 
<STYLE TYPE="TEXT/CSS"> 


其 中 ，<STYLE>、</STYLE> 分 别 代 表 样式 的 开始 和 结束 。 
定义 好 某 个 标签 (如 <p>) 的 样式 后 ， 所 有 同类 的 标签 (如 <p>) 都 将 采用 该 样式 。 


3.223 ”外 部 样式 表 


无 论 是 行内 样式 还 是 内 赚 样 式 ， 都 实现 了 在 同一 个 网 页 内 ， 各 个 标签 可 以 采用 
自己 希望 的 样式 。 但 这 远 远 不 够 ， 因 为 在 开发 网 站 时 ， 可 能 希望 整个 网 站 的 所 有 网 
页 都 采用 同一 样式 ， 这 怎么 办 呢 ? 你 肯定 想到 了 ! 把 这 些 样式 从 <HEAD> 标 签 中 提 
取出 来 ， 放 入 一 个 单独 的 文件 ， 然 后 和 每 个 网 页 关联 不 就 可 以 了 吗 ? 完全 正确 ， 这 
就 是 外 部 样式 表 。 

根据 样式 文件 与 网 页 的 关联 方式 , 可 分 为 两 种 : 链接 外 部 样式 表 和 导入 样式 表 。 


1. 链接 外 部 样式 表 
链接 外 部 样式 表 是 指 通过 HTML 的 LINK 标签 ， 把 样式 文件 和 网 页 建立 关联 ， 
而 这 个 <LINK> 标 签 必须 放 到 页 面 的 <HEAD> 区 域内 ， 其 语法 格式 如 下 : 
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<head> 
<link rel="stylesheet" type="text/css" hre 全 "样式 表 文件 .css" 
</head> 


在 该 语法 中 ， 浏 览 器 以 文档 格式 从 样式 表 文 件 中 读 出 定义 的 样式 表 。 


Rel="stylesheet" 是 指 在 页 面 中 使 用 的 是 外 部 样式 表 ; type="text/css" 是 指 文件 的 类 型 
是 样式 表 文 本 ; href 参数 用 来 指定 文件 的 地 址 ， 可 以 是 绝对 地 址 或 相对 地 址 。 


具体 创建 步骤 如 下 所 示 : 
(1) 创建 外 部 样式 表 文 件 ， 新 建文 本 文档 ， 把 以 前 写 在 <HEAD> 中 的 样式 规则 


写 入 这 个 文件 即 可 ， 保 存 时 以 .css 为 扩展 名 ,假设 取 名 为 mystyle.css。 


mystyle.css 文件 的 代码 如 下 : 


pí 

font-family: 宋 体 : 
font-size:36px; 

j 

:text{ 
background-colorblue: 
font-size:18px; 


} 


(2) 把 样式 文件 和 网 页 关联 : 假定 某 个 网 站 中 的 3-9.html 和 3-10.html 网 页 都 引 


用 mystyle.css 样式 表 。 其 代码 如 下 : 


3-9.html 文件 : 


<html> 
<head> 引用 外 部 样式 表 文 件 mystyle.css 
<title> 外 部 样式 表示 例 </title> 


<link rel="stylesheet" type="text/css" href="mystyle.css" /> 
</head> 


<body> 
<p>HTML 语言 是 制作 网 页 的 基础 语言 
<p class="text"> 作 为 一 个 网 页 制作 爱好 者 或 者 专业 的 网 页 设计 师 , HTML 语言 知识 是 不 可 或 


缺 的 。 
</body> 采用 mystyle.css 文件 中 规定 的 <p> 链 接 样 式 显示 


</html> 
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在 浏览 器 中 查看 该 页 面 时 ， 输 出 结果 如 图 3-9 所 示 。 
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3-9 ”外 部 样式 表示 例 


3-10.html 文件 : 


<html > 

<head> 

<title> 外 部 样式 表示 例 </title> 

<link rel="stylesheet" type="text/css" href="mystyle.css" /> 

</head> 

<body> 

<h3> 轩 辕 剑 三 外 传 : 天 之 痕 </h3> 

<hr> 

<p class="text">&nbsp:&nbsp:&nbsp:&nbsp: 神 州 大 地 上 ， 从 神话 时 代 流 传 下 来 十 种 上 古 神 
器 一 一 钟 、 剑 、 和 耸 、 壶 、 塔 、 琴 、 易 、 印 、 镜 、 石 。 它 们 各 自 有 着 过 然 不 同 的 绝世 力量 。 只 
要 稍 加 利用 即 可 纵横 四 海 ， 无 敌 天 下 。 但 它们 的 下 落 ， 已 潭 灭 于 神州 漫长 之 乱世 历史 中 。 
<p>&nbsp:&nbsp:&nbsp:&nbsp: 除 了 轩辕 剑 ， 还 有 创 世 神 开天辟地 使 用 的 神器 炼 妖 壶 ， 在 上 
古 英 雄 的 手中 驾 转 流传 ， 在 这 些 古 人 的 庇佑 下 ， 中 国 到 了 文化 易 盛 的 时 代 一 一 隋唐 。 
</body> 

</html> 


在 浏览 器 中 查看 该 页 面 时 ， 输 出 结果 如 图 3-10 所 示 。 
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神州 大 地 上 ， 从 神话 时 代 流 传 下 来 十 种 上 十 神器 一 钟 、 创 、 章 、 查 . B. 3. R. hD. R. 布 。 它 们 名 
自 有 着 迅 然 不 局 的 绝世 力量 。 只 要 稠 加 利用 即 司 纵 宴 四海， 无故 天 下 。 但 己 们 的 下 落 ， 已 玛 丈 于 神州 漫长 之 剧 
世 历 史 中 。 


除了 轩辕 剑 ， 还 有 创 世 神 开 天 尽 地 使 用 的 神器 炼 括 
壶 ， 在 上 古 英 雄 的 手中 畏 转 流传 ， 在 这 些 古 人 的 庇佑 
下 ， 中 国 到 了 文化 易 盛 的 时 代 一 一 辽 唐 。 
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2. 导入 样式 表 
在 网 页 中 ， 还 可 以 使 用 @import 方 法 导入 样式 表 ， 其 格式 如 下 。 


<head> 

<style type="text/css"> 

@import 样式 表 文 件 .css 

选择 器 { 样 式 属 性 : 取 值 ; 样式 属性 : BE 


在 使 用 时 ， 需 要 注意 的 是 导入 外 部 样式 表 ， 也 就 是 @import 声明 必须 在 
样式 表 定义 的 开始 部 分 ， 而 其 他 样式 表 的 定义 都 要 在 @import 声明 之 后 。 


° 样式 表 由 样式 规则 组 成 ， 这 些 规则 告诉 浏览 器 如 何 显示 文档 。 样 式 表 是 将 
样式 (如 字体 、 磊 色 、 字 号 等 ) 添 加 到 网 页 中 的 简单 机 制 。 

° 样式 表 包 括 选 择 器 和 样式 规则 ， 选 择 器 又 分 为 元 素 选择 器 、CLASS 选择 器 
和 1JD 选择 器 。 

o 根据 样式 代码 的 位 置 不 同 ， 可 以 将 样式 分 为 三 类 : 行内 样式 表 、 内 部 样式 
表 和 外 部 样式 表 。 


[ 自 测 题 】 


1.( ，) 属 性 指定 字体 为 : 正常 、 斜 体 和 偏 斜 体 。 
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A. Font Style B. Font Family 
C. Line Height D. Font Designer sight 
2. 要 链接 到 外 部 样式 表 mystyle.css， 下 列 代码 正确 的 是 ( )o 
A. <head><link rel="mystyle.css" ...... ></head> 
B. <head><link href="mystyle.css"></head> 
C. <head><style><link rel="mystyle.css" ......></style></head> 
D. <head><style><link href="mystyle.css" ......></style></head> 
3.( ”) 样 式 表 一 般 应 用 于 大 站 点 。 
A. 相对 B. 外 部 
C. IRA D. 行内 
4. 为 了 在 网 页 中 将 H1 标题 定位 于 左边 距 为 100px、 上 边 距 为 50px 处 ， 效 果 如 
11 所 示 ， 下 面 代码 正确 的 是 ( )o 
A. B. 


hl{ hl{ hl{ 
position:absolute; left:100px; :100: position:absolute: 
left:100px; top:50px: :50; left:100; 


top:50px: top:50; 


} 
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图 3-11 H1 标题 定位 


5. 在 样式 表 中 ( ”) 属 性 设置 文本 框 的 边框 粗细 。 
A. Border B. Border-Style 
C. Border-Size D. Border-Left-Width 
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【上 机 部 分 】 


上 机 目标 


° 使 用 行内 样式 表 、 内 嵌 样 式 表 、 外 部 样式 表 及 其 关联 。 
° 对 表单 元 素 使 用 样式 表 
° 使 用 层 


上 机 练习 
+ 第 一 阶段 多 


练习 1: 第 一 个 程序 


【问题 描述 】 
对 表单 元 素 中 的 文本 框 和 按钮 应 用 样式 ， 改 变 文 本 框 的 边框 颜色 和 文字 颜色 ， 
并 将 按钮 的 字体 变 大 。 


【问题 分 析 】 
对 按钮 的 字体 使 用 行内 样式 表 ， 定 义 一 个 类 选择 器 。 
参考 代码 : 


<html> 

<HEAD> 

<STYLE type="text/css"> 

myinput 

{ 
border: 2px solid: 
border-color:#D4BFFF; 
color:#2A00FF 

} 
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</STYLE> 

</HEAD> 

<BODY> 

<FORM action="http://www.hubei.com" method="post"> 

<P> 用 户 名 

<INPUT name="textfield" type="text" class="myinput" ></P> 

<P> 密 &nbsp: 码 

<INPUT name="textfield" type="password" class="myinput"> 

</P> 

<P> 
<INPUT name="Submit" type="submit" value=" 提 交 " style="font-size:20px:"> 
<INPUT type="submit" name="Submit" value=" Æ 填 " style="font-size:20px:"> 

</P> 

</FORM> 

</body> 

</html> 


显示 的 输出 结果 如 图 3-12 所 示 。 
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图 3-12 对 表单 元 素 使 用 样式 


练习 2: 样式 的 混合 使 用 


【问题 描述 】 
要 求 使 用 外 部 样式 表 、 行 内 样式 表 、 内 谈 样 式 表 完成 下 面 的 网 页 设计 。 


【问题 分 析 】 
编写 newstyle.css 样式 表 ， 然 后 在 HTML 页 面 文件 中 为 相应 的 元 素 添加 样式 。 
参考 代码 : 
newstyle css 代码 如 下 所 示 。 
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P ( 
让 设置 段落 <P> 的 样式 ， 字体 和 背景 色 */ 

font-family: System: 

font-size: 18px: 

color: #FF00CC; 

} 

H2{ 

PREHR: 背景 色 和 对 齐 方式 %/ 

background-color: #CCFF33; 

text-align: center; 

} 

Aí 

MARRET FRR, text-decoration 表示 文本 修饰 */ 

color: blue; 

text-decoration: none; 

) 

A:hover { ”/* 鼠 标 指针 在 超 链 接 上 县 停 ， 带 下 划 线 */ 
color: red: 
text-decoration:underline: 


} 
HTML 页 面 文件 代码 如 下 所 示 。 


<HTML> 

<HEAD> 

<TITLE> 样 式 的 混合 使 用 </TITLE> 

<LINK href="newstyle.css" rel="stylesheet" type="text/css"> 

</HEAD> 

<BODY> 

<H2><IMG src="001.gif" width="180" height="150"> 
<BR> 

各 种 惊喜 等 你 拿 </H2> 

<UL> 
<LI><A href="first.htm"> 惊 喜 第 一 重 : Q 宏 圣 诞 袜 </A></LI> 
<LI><A href="second.htm"> 惊 喜 第 二 重 : 圣诞 礼包 大 抢购 </A></LI> 
<LI><A hre 全 "third.htm"> 惊 喜 第 三 重 : Q 宏 温 声 送 祝福 </A></LI> 

</UL> 

<H4> 圣 诞 礼包 大 抢购 </H4> 

<P style=" font-size:14: font-style:italic: color: #00FF00 ">[ 摘 要 ]<BR> 

诞 旦 相连 献 好 礼 , Q 宠 社 区 为 您 精心 准备 一 批 诞 旦 大 礼包 , 内 容 丰 富 。 购 买 礼包 的 同时 ， 
还 可 获得 圣诞 礼盒 一 只 。 
您 可 以 选择 将 圣诞 礼盒 送 给 您 的 好 友 ， 让 他 /她 分 享 圣诞 的 喜悦 ! </P> 
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<P> 圣 诞 树 下 有 3 种 诞 旦 礼包 大 抢购 ， 面 值 分 别 为 3Q 币 、5Q 币 、10Q 币 ， 以 满足 您 的 不 同 
需求 。 每 次 购买 礼包 可 获得 圣诞 礼盒 一 只 ， 礼 盒 中 包含 的 物品 是 随机 的 ， 均 为 没有 出 售 的 神 
秘 物品 。 当 然 ， 选 择 越 贵 的 礼包 ， 得 到 的 礼盒 价值 也 越 高 哦 ! </P> 

</BODY> 

</HTML> 


上 述 代 码 的 运行 结果 如 图 3-13 所 示 。 


各 种 惊喜 等 你 全 


e RERE: QER 
* 惊喜 第 二 重 : 予 诞 礼包 大 抢购 
* 惊喜 第 三 重 : QPB DIS 


圣诞 礼包 大 抢购 


LEE enna, ASES, MELEKE, Eras. STUREN 


Faih Atie, mAsa. so. mof., LUZ fy ZAFER. EA ETLETEREUL E- R 礼 
£'iFt12000 EMS. HRA LEARRA. S. WESAL, FALEM LES 


3-13 ”样式 的 混合 使 用 


+ 第 二 阶段 + 


练习 3: 利用 CSS 的 属性 实现 图 示 的 效果 
【问题 描述 】 
对 标签 设置 属性 ， 需 要 设 定 的 属性 值 有 : top、left， 如 图 3-14 所 示 。 


学 习 CSS 属性 


标题 在 文档 顶部 下 面 100px 处 ， 且 在 文档 左 侧 边缘 的 右 
段落 在 文档 顶部 下 面 200px 处 ， 且 在 文档 左 仙 边缘 的 


3-14 使 用 Css 属性 
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【 课 后 作业 ] 


1. 使 用 行内 样式 表 实现 如 图 3-15 所 示 的 效果 ,图 中 对 最 下 面 的 一 段 话 应 用 了 行内 
样式 。 


抢购 最 便宜 MP3 


另 送 充电 器 作答 1 (一 个 充电 器 ， 两 节 充 电 电池 ) 可 使 用 半年 以 上 ， 


3-15 ”行内 样式 表 的 使 用 


2. 使 用 ID 选择 器 实现 如 图 3-16 所 示 的 效果 。 


图 3-16 ID 选择 器 的 使 用 


3. 使 用 样式 表 和 层 实 现 如 图 3-17 所 示 的 效果 。 


WE amo mo TAD mes 
二 + DAJ Ams yar grs J le EL 
Coa 


J ern jer 
人 才 素 质 模型 和 面试 评估 要 点 设计 


sd pikunan 2, 
SANGS Aki 


人 本。 直人 迷人 全 和 人 条 
ENEAN 
L TENBES 


3-17 样式 表 和 层 的 使 用 


4. 使 用 样式 表 和 表格 (或 层 ) 实 现 如 图 3-18 所 示 的 效果 。 


x= ms 


EFO oea TAD a 
Poea 333 Qw sme ow Jia += EEI 

Mn fT z em us" 
Bz — 


图 3-18 样式 表 和 表格 的 使 用 
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Q 课程 目标 
> 理解 表现 和 结构 分 离 
> 掌握 如 何 使 用 DIV 
P 掌握 如 何 使 用 盒子 模型 
P 掌握 如 何 使 用 浮动 定位 
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4, É f 


DIV+CSS 网 页 布局 一 直 以 来 都 是 CSS 制作 网 站 的 精华 ， 一 个 好 的 网 站 多 半 是 
由 于 其 合理 且 有 意义 的 布局 而 使 得 网 站 更 具 表 现 力 。 


4.1 理解 表现 和 结构 分 离 


对 于 初学 者 ,我 们 常 看 见 web 标准 的 好 处 之 一 是 “能 做 到 表现 和 结构 相 分 离 ”， 
这 到 底 是 什么 意思 呢 ? 下 面 以 一 个 实际 的 例子 来 详细 说 明 。 首 先 我 们 必须 明白 一 些 
基本 的 概念 ， 内容、 表现 、 结 构 。 


1. 内 容 


内 容 就 是 页 面 实际 要 传达 的 真正 信息 ， 包 含 数据 、 文 档 或 者 图 片 等 。 注 意 这 里 
强调 的 “真正 ”， 是 指 纯粹 的 数据 信息 本 身 。 例 如 ， 一 个 不 包含 辅助 的 信息 ， 导 航 
菜单 、 装 饰 性 图 片 等 。 举 个 例子 ， 下 面 这 段 文本 是 页 面 要 表现 的 信息 。 


忆 江 南 (1) 唐 .白居易 江南 好 ， 风 景 旧 曾 谱 。(2) 日 出 江 花红 胜 火 ， 春 来 江水 绿 如 
蓝 ，(3) 能 不 忆 江 南 ? 作者 介绍 772 - 846， 字 乐天 ， 太 原 ( 今 属 山西 ) 人 人。 唐德宗 朝 进 
士 ， 元 和 三 年 (808) 拜 左 拾遗 ， 后 贬 江 州 ( 今 属 江西 ) 司 马 ， 移 忠 州 ( 今 属 四 川 ) 刺 史 ， 
又 为 苏州 ( 今 属 江苏 )、 同 州 ( 今 属 陕西 大 荔 ) 刺 史 。 晚 居 洛 阳 ， 自 号 醉 吟 先生 、 香 山居 
士 。 其 诗 政治 倾向 鲜明 ， 重 讽 喻 ， 尚 坦 易 ， 为 中 唐 大 家 。 也 是 早期 词 人 中 的 佼佼 者 ， 
所 作对 后 世 影响 甚大 。 注 释 (1) 据 《乐府 杂 录 》， 此 词 又 名 《 谢 秋 娘 》， 系 唐 。 李 德 裕 
为 亡 姬 谢 秋 娘 所 作 。 又 名 《 望 江南 《 梦 江南 》 等 。 分 单调 、 双 调 两 体 。 单 调 二 十 
七 字 ， 双 调 五 十 四 字 ， 蕴 平 韵 。(2) 语 ( 音 安 ): 熟悉 。(3) 蓝 : 蓝 草 ， 其 叶 可 制 青绿 染 
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料 。 品 评 此 词 写 江南 春色 ， 首 名 “江南 好 ?， 以 一 个 既 浅 切 又 圆 活 的 “好 ” 字 ， 摄 尽 
江南 春色 的 种 种 佳境 ， 而 作者 的 赞 颁 之 意 与 向 往 之 情 也 尽 富 其 中 。 同 时 ， 唯 因 “ 好 ” 
之 已 其 , 方 能 “ 忆 ” 之 不 休 ， 因 此 ， 此 和 句 又 以 瞳 运 结 句 “能 不 忆 江 南 ? ”， 并 与 之 相 
关闭 。 次 句 “ 风 景 旧 曾 语 ”， 点 明江 南 风 景 之 “好 ”， 并 非得 之 传闻 ， 而 是 作者 出 牧 
杭州 时 的 亲身 体验 与 感受 。 这 就 既 落 实 了 “好 ” 字 ， 又 照应 了 “ 忆 ” 字 ， 不 失 为 勾 
通 一 篇 意 脉 的 精彩 笔墨 。 三 、 四 两 身 对 江南 之 “好 ”进行 了 形象 化 的 演绎 ， 突 出 泻 
染 江 花 、 江 水 红 绿 相映 的 明艳 色彩 ， 给 人 以 光彩 夺目 的 强烈 印象 。 其 中 ， 既 有 同色 
间 的 相互 烘托 ， 又 有 蜡 色 间 的 相互 映衬 ， 充 分 显示 了 作者 善于 着 色 的 技巧 。 篇 末 ， 
以 “能 不 忆 江 南 ? ” 收 束 全 词 ， 既 寄托 出 身 在 洛阳 的 作者 对 江南 春色 的 无 限 赞 叹 与 
怀念 ， 又 造成 一 种 悠远 而 又 深长 的 韵味 ， 把 读者 带 入 余 情 摇 泣 的 境界 中 。 


2. 结构 


可 以 看 到 上 面 的 文本 信息 本 身 已 经 完整 。 但 是 混乱 一 团 ， 难 以 阅读 和 理解 ， 我 
们 必须 给 它 格式 化 一 下 。 把 它 分 成 标题 、 作 者 、 章 、 节 、 段 落 和 列表 等 。 


标题 忆 江 南 (1) 

作者 唐 .白居易 

EX 

江南 好 ， 风 景 旧 曾 语 。(2) 

日 出 江 花 红 胜 火 ， 春 来 江水 绿 如 蓝 ，(3) 

能 不 忆 江 南 ? 

节 1 作者 介绍 

772 - 846， 字 乐天 ， 太 原 ( 今 属 山西 ) 人 。 唐 德 宗 朝 进 士 ， 元 和 三 年 (808) 拜 左 拾 
遗 ， 后 贬 江 州 ( 今 必 江西) 司马， 移 患 州 ( 今 属 四 川 ) 刺 史 ， 又 为 苏州 ( 今 属 江苏 )、 同 州 
( 今 属 陕西 大 菊 ) 刺 史 。 晚 居 洛 阳 ， 自 号 醉 吟 先生 、 香 山居 士 。 其 诗 政治 倾向 鲜明 ， 
重 讽 喻 ， 尚 坦 易 ， 为 中 唐 大 家 。 也 是 早期 词 人 中 的 佼佼 者 ， 所 作对 后 世 影响 其 大 。 
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节 2 注释 

列表 

(1) 据 《乐府 杂 录 》， 此 词 又 名 《 谢 秋 女 》， 系 唐 。 李 德 裕 为 亡 姬 谢 秋 娘 所 作 。 
又 名 《 望 江南 》、《 梦 江南 》 等 。 分 单调 、 双 调 两 体 。 单 调 二 十 七 字 ， 双 调 五 十 四 字 ， 
FPR 

(2) 请 ( 音 安 ): AA. 

G) Ë: 蔓草， 其 叶 可 制 青绿 染料 。 

节 3 品评 

此 词 写 江南 春色 ， 首 名“ 江南 好 ”， 以 一 个 既 浅 切 又 圆 活 的 “好 ” 字 ， 摄 尽 江南 
春色 的 种 种 佳境 ， 而 作者 的 赞颂 之 意 与 向 往 之 情 也 尽 富 其 中 。 同 时 ， 唯 因 “ 好 ”之 
已 其 , 方 能 “ 忆 ” 之 不 休 ， 因 此 ， 此 名 又 以 暗 运 结 句 “能 不 忆 江 南 ? ”， 并 与 之 相关 
益 。 次 名 “风景 旧 曾 请 "， 点 明江 南 风景 之 “好 ”， 并 非得 之 传 辣 ， 而 是 作者 出 牧 杭 
州 时 的 亲身 体验 与 感受 。 这 就 既 落 实 了 “好 ” 字 ， 又 照应 了 “ 忆 ” 字 ， 不 失 为 勾 通 
一 篇 意 脉 的 精彩 笔墨 。 三 、 四 两 身 对 江南 之 “好 ”进行 了 形象 化 的 演绎 ， 突 出 泻 
江 花 、 江 水 红 绿 相映 的 明艳 色彩 ， 给 人 以 光彩 夺目 的 强烈 印象 。 其 中 ， 既 有 同色 间 
的 相互 烘托 ， 又 有 异 色 间 的 相互 映衬 ， 充 分 显示 了 作者 善于 着 色 的 技巧 。 篇 末 ， 以 
“能 不 忆 江 南 ? ” 收 束 全 词 ， 既 寄托 出 身 在 洛阳 的 作者 对 江南 春色 的 无 限 赞叹 与 怀 
念 ， 又 造成 一 种 悠远 而 又 深长 的 韵味 ， 把 读者 带 入 余 情 摇 澜 的 境界 中 。 


3. 表现 


虽然 定义 了 结构 ， 但 是 内 容 还 是 原来 的 样式 没有 改变 ， 例 如 ， 标 题字 体 没 有 变 
大 、 正 文 的 颜色 也 没有 变化 、 没 有 背景 、 没 有 修饰 。 所 有 这 些 用 来 改变 内 容 外 观 的 
东西 ， 我 们 称 之 为 “表现 ”。 将 上 面 的 文本 用 表现 处 理 后 的 效果 如 图 4-1 所 示 。 

很 明显 ， 我 们 加 了 两 种 背景 ， 将 标题 字体 变 大 并 居中 ， 将 小 标题 加 粗 并 变 成 红 
色 等 。 所 有 这 些 ， 都 是 “表现 ”的 作用 。 它 使 内 容 看 上 去 漂亮 、 可 爱 多 了 ! 有 个 形 
象 的 比喻 : 内 容 是 模特 ， 结 构 标 明 头 和 四 肢 等 各 个 部 位 ， 表 现 则 是 服装 ， 将 模特 打 
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arma 
作者 RARS 
江南 好 ， 风 景 旧 普 请 。(2) 
日 出 江 花 红 胜 火 ， 者 来 江水 绿 如 蓝 ，(3) 
能 不 忆 江南 ? 
太原 (他 属 山西 ) 人 。 唐 德 索 朝 进士 ， 元 和 三 年 (s08) 知 左 拉 遗 ， 后 贬 江 州 ( 今 属 江 四 ) 司 马 ， 


en 又 为 苏州 ( 今 属 江 苏 )、 同 州 ( 仿 RER k sala. RERA, ASEMA EU 
E? Faaa, BUS, MiS, HHEKE. 也 是 早期 词 人 中 的 佼 全 者 ， 所 作对 后 世 陨 向 甚大 。 


` SR. Pu et: 系 唐 . 李 德 浴 为 亡 姬 甜 秋 塘 所 作 。 又 名 《 望 江南 》、《 梦 江 
Wi SF, Sr NY MARE. MA-HEF., MAEHUF, EPR. 

* DAER): A 

. OQ: 蓝 草 ， eeth 


kisrars, 首 句 “江南 好 ” kha TN 


南 Ea i maa 
赞颂 之 意 与 向 往 之 情 世 尽 寓 其 中 . 
“能 南 ? Fa ， 并 与 之 由 关 | 


的 情 彩 
人 和 全 人 


Peti 


收 杭 3 

=. 句 对 江南 之 “好 ”进行 了 形象 化 的 演绎 ， 突 | Ki 

和 和 其 中 ， 既 有 同色 间 的 相互 类 托 ， 又 有 异 包 间 的 相互 映衬 ， 充 分 亚 示 了 ， 
技巧 。 篇 本， 以 “能 不 忆 江南 ? BREN, EEEH 人 Sia 


成 一 种 您 还 而 又 深长 的 草 味 ， 把 读者 带 入 余 情 揪 漂 的 境界 中 


4-1 使 用 <DIV> 标 签 


4.1.2 DIV 与 CSS 结合 的 优势 


1. 表现 和 内 容 相 分 离 

将 设计 部 分 剥离 出 来 放 在 一 个 独立 样式 文件 中 ,HTML 文件 中 只 存放 文本 信息 。 
这 符合 W3C 标准 ， 微 软 等 公司 均 为 W3C 支持 者 ， 这 一 点 是 最 重要 的 ， 因 为 这 可 以 
保证 用 户 的 网 站 不 会 因为 将 来 网 络 应 用 的 升级 而 被 淘汰 。 


高 搜索 引擎 对 网 页 的 索引 效率 


用 只 包含 结构 化 内 容 的 HTML 代 蔡 柑 套 的 标签 , 搜索 引擎 将 更 有 效 地 搜索 到 用 
户 的 网 页 内 容 ， 并 可 能 给 用 户 一 个 较 高 的 评价 。 
3. 代码 简洁 ， 提 高 页 面 浏览 速度 
对 于 同一 个 页 面 视觉 效果 , 采用 CSS+DIV 重 构 的 页 面容 量 要 比 TABLE 编码 的 
页 面 文件 容量 小 得 多 ， 代 码 会 更 加 简洁 ， 前 者 一 般 只 有 后 者 的 1/2 大 小 。 对 于 一 
大 型 网 站 来 说 ， 可 以 节省 大 量 带宽 。 并 且 支 持 浏览 器 的 向 后 兼容 ， 也 就 是 说 无 论 未 
来 的 浏览 器 大 战 ， 胜 利 的 是 IE 7 还 是 火狐 ， 您 的 网 站 都 能 很 好 地 兼容 。 
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4. 易于 维护 和 改版 


样式 的 调整 更 加 方便 。 内 容 和 样式 的 分 离 , 使 页 面 和 样式 的 调整 变 得 更 加 方便 。 
你 只 要 简单 地 修改 几 个 CSS 文件 就 可 以 重新 设计 整个 网 站 的 页 面 。 现 在 , YAHOO、 
MSN 等 国际 门户 网 站 ， 网 易 、 新 浪 等 国内 门户 网 站 ， 以 及 主流 的 Web 2.0 网 站 , 均 
采用 DIV+CSS 的 框架 模式 ， 更 加 印证 了 DIV+CSS 是 大 势 所 趋 。 


4.1.3 ”怎么 改善 现 有 的 网 站 


我 们 大 部 分 的 设计 师 依 旧 在 采用 传统 的 表格 布局 、 表 现 与 结构 混杂 在 一 起 的 方 
式 来 建设 网 站 。 学 习 使 用 XHTML+CSS 的 方法 需要 一 个 过 程 , 使 现 有 网 站 符合 网 站 
标准 也 不 可 能 一 步 到 位 ， 最 好 的 方法 是 循序 渐进 ， 分 阶段 来 逐步 达到 完全 符合 网 站 
标准 的 目标 。 如 果 用 户 是 新 手 ， 或 者 对 代码 不 是 很 熟悉 ， 也 可 以 采用 遵循 标准 的 编 
辑 工 具 ， 如 Dreamweaver 8， 它 是 目前 支持 CSS 标准 最 完善 的 工具 。 


1. 初级 改善 

e° 为 页 面 添加 正确 的 DOCTYPE 

很 多 设计 师 和 开发 人 员 都 不 知道 什么 是 DOCTYPE, DOCTYPE 有 什么 用 ,DOCTYPE 
是 document type 的 简写 ， 主 要 用 来 说 明 用 户 用 的 XHTML 或 者 HTML 是 什么 版 本 。 浏 览 
器 根据 DOCTYPE 定义 的 DTD( 文 档 类 型 定义 ) 来 解释 页 面 代码 。 所以， 一 旦 不 注意 设置 了 
错误 的 DOCTYPE， 结 果 会 让 你 大 吃 一 惊 。 XHTML 1.0 提供 了 3 种 DOCTYPE 供 选 择 : 

(1) 过 渡 型 (Transitional) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.ore/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


(2) 严格 型 (Strict) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
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(3) 框架 型 (Frameset) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 


初级 改善 ， 只 要 选用 过 渡 型 的 声明 就 可 以 了 ， 它 依然 可 以 兼容 表格 布局 、 表 现 
标识 等 ， 不 至 于 让 用 户 觉得 变化 太 大 ， 难 以 掌握 。 

e° 设 定 一 个 名 字 空 间 (Namespace) 

直接 在 DOCTYPE 声明 后 面 添 加 如 下 代码 : 


<html xmlns="http://www.w3.org/1999/xhtml" > 


namespace 是 收集 元 素 类 型 和 属性 名 字 的 一 个 详细 的 DTD, namespace 声明 允许 
用 户 通过 一 个 在 线 地 址 指向 来 识别 用 户 的 namespace， 只 要 照样 输入 代码 即 可 。 

e° 声明 用 户 的 编码 语言 

为 了 被 浏览 器 正确 解释 和 通过 标识 校 验 ， 所 有 的 XHTML 文档 都 必须 声明 它们 
所 使 用 的 编码 语言 。 代 码 如 下 : 


<meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 


这 里 声明 的 编码 语言 是 简体 中 文 GB2312， 如 果 用 户 需 要 制作 繁体 内 容 ， 可 以 
定义 为 BIG5。 

° 用 小 写字 母 书写 所 有 的 标签 

XML 对 大 小 写 是 敏感 的 ， 所 以 , XHTML 也 是 有 大 小 写 区 别 的 。 所 有 的 XHTML 
元 素 和 属性 的 名 字 都 必须 使 用 小 写 ， 否 则 你 的 文档 将 被 W3C 校 验 认为 是 无 效 的 。 例 
如 下 面 的 代码 是 不 正确 的 : 

<TITLE> 公 司 简介 </TITLE> 

正确 的 写法 是 : 

<title> 公 司 简介 </title> 


同样 地 ，<P> 改 成 <p>，<B> 改 成 <b> 等 ， 这 步 转换 很 简单 。 
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。 为 图 片 添加 alt 属性 

为 所 有 图 片 添加 alt 属性 。alt 属性 指定 了 当 图 片 不 能 显示 的 时 候 就 显示 蔡 换 文 
本 ， 这 样 做 对 正常 用 户 可 有 可 无 ， 但 对 纯 文 本 浏览 器 和 使 用 屏幕 阅读 器 的 用 户 来 说 
是 至 关 重 要 的 。 只 有 添加 了 alt 属性 ， 代 码 才 会 被 W3C 正确 性 校 验 通过 。 值 得 注意 
的 是 ， 我 们 要 添加 有 意义 的 alt 属性 ， 像 下 面 这 样 的 写法 毫 无 意义 : 


<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif'> 
正确 的 书写 如 下 : 
<img src="logo_unc_120x30.gif" alt="UNC 公司 标志 ， 单 击 返 回首 页 "> 


e 给 所 有 属性 值 加 引号 

在 HTML 中 , 你 可 以 不 给 属性 值 加 引号 , 但 是 在 XHTML 中, 它们 必须 加 引号 。 
例如 : 可 以 是 height="100"， 而 不 能 是 height=100。 

° 关闭 所 有 的 标签 

在 XHTML 中 ， 每 一 个 打开 的 标签 都 必须 关闭 ， 如 下 所 示 : 

<p> 每 一 个 打开 的 标签 都 必须 关闭 。</p> <b>HTML 可 以 接受 不 关闭 的 标签 ，XHTML 就 不 

可 以 。</b> 

这 个 规则 可 以 避免 HTML 的 混乱 和 麻烦 。 举 例 来 说 : 如 果 用 户 不 关闭 图 像 标 签 ， 
在 一 些 浏 览 器 中 就 可 能 出 现 CSS 显示 问题 。 用 这 种 方法 能 确保 页 面 和 用 户 设计 的 显 
示 一 样 。 需 要 说 明 的 是 : 空 标签 也 要 关闭 ， 在 标签 尾部 使 用 一 个 正 斜 枉 “/ ”来 关闭 
它们 即 可 。 例 如 : 

<br/> 

<img src="webstandards.gif" /> 

经 过 上 述 7 个 规则 处 理 后 ， 页 面 就 基本 符合 XHTML 1.0 的 要 求 了 ， 但 我 们 还 需要 校 验 
一 下 是 否 真 的 符合 标准 。 我 们 可 以 利用 W3C 提供 的 免费 校 验 服务 http:/validator w3.org/)， 
发 现 错误 后 逐个 修改 。 在 后 面 的 资源 列表 中 我 们 也 提供 了 其 他 校 验 服务 和 对 校 验 进 
行 指导 的 网 址 ， 可 以 作为 W3C 校 验 的 补充 。 如 果 最 后 通过 了 XHTML 验证 ， 恭 喜 
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你 已 经 向 网 站 标准 迈 出 了 一 大 步 。 不 是 想象 中 的 那么 难 吧 ! 
2. 中 级 改善 


中 级 改善 主要 在 结构 和 表现 相 分 离 上 ， 这 一 步 不 像 第 一 步 那么 容易 实现 ， 我 们 
需要 观念 上 的 转变 ， 以 及 对 CSS 2 技术 的 学 习 和 运用 。 但 学 习 任何 新 知识 都 需要 花 
点 时 间 ， 诀 穿 在 于 边 做 边 学 。 假 如 用 户 一 直 采 用 表格 布局 ， 根 本 没 用 过 CSS， 也 不 
必 急 于 和 表格 布局 说 再 见 ， 可 以 先 用 样式 表 代 蔡 font 标签 。 随 着 所 学 知识 的 增多 ， 
用 户 能 做 的 就 越 多 。 好 ， 一 起 来 看 看 我 们 需要 做 哪些 事 : 

e° 用 CSS 定义 元 素 外 观 

我 们 在 写 标识 时 已 经 养 成 习惯 ， 当 希望 字体 大 点 就 用 <h1>， 希望 在 前 面 加 个 点 
符号 就 用 <li>。 我 们 总 是 认为 < h1> 的 意思 是 大 的 、<li> 的 意思 是 圆 点 、<b> 的 意思 是 
加 粗 文本 。 而 实际 上 ，<hl> 能 变 成 你 想 要 的 任何 样子 ， 通 过 CSS，<h1> 能 变 成 小 的 
字体 ，<p> 文 本 能 够 变 成 巨大 的 粗 体 ，<li> 能 够 变 成 一 张 图 片 等 。 我 们 不 能 强迫 用 结 
构 元 素 实现 表现 效果 ， 我 们 应 该 使 用 CSS 来 确定 那些 元 素 的 外 观 。 例 如 ， 我 们 可 以 
使 原来 默认 的 6 级 标题 看 起 来 大 小 一 样 : 


h1, h2, h3, h4, h5, h6{ font-family: 宋体 , serif; font-size: 12px: } 


° 用 结构 化 元 素 代替 无 意义 的 标签 

许多 人 可 能 从 来 都 不 知道 HTML 和 XHTML 元 素 的 设计 本 意 是 用 来 表达 结构 的 ， 
人 们 已 经 习惯 用 元 素来 控制 表现 ， 而 不 是 结构 。 例 如 ， 一 段 列 表 内 容 可 能 会 使 用 下 
面 这 样 的 标识 : 

句子 一 <br /> 句子 二 <br 人 > 句子 三 <br /> 

如 果 我 们 采用 一 个 无 序列 表 代 蔡 会 更 好 : 

<ul> <li> 句 子 一 </li> <li> 句 子 二 </li> <1l 记 句子 三 </li> </ul> 


你 或 许 会 说 : “<li> 显 示 的 是 一 个 圆 点 ， 我 不 想 用 圆 点 ”。 事 实 上 ，CSS 没有 
设 定 元 素 看 起 来 是 什么 样子 ， 用 户 完 全 可 以 用 CSS 关 掉 圆 点 。 
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e 给 每 个 表格 和 表单 加 上 id 

给 表格 或 表单 赋予 一 个 唯一 的 、 结 构 的 标记 ， 例 如 : 

<table id="menu"> 

接 下 来 ， 在 书写 样式 表 的 时 候 ， 用 户 就 可 以 创建 一 个 “menu” 选 择 器 ， 并 且 关 
联 一 个 CSS 规则 ， 用 来 告诉 表格 单元 、 文 本 标签 和 所 有 其 他 元 素 怎 么 去 显示 。 只 需 
要 一 个 附着 的 标记 (标记 “menu” 的 id 标记 ), 用户 就 可 以 在 一 个 分 离 的 样式 表 内 为 
干净 的 、 紧 凑 的 代码 标记 进行 特别 的 表现 层 处 理 。 

中 级 改善 我 们 这 里 先 列 主要 的 3 点 ， 但 其 中 包含 的 内 容 和 知识 点 非常 多 ， 需 要 
逐步 学 习 和 掌握 ， 直 到 最 后 实现 完全 采用 CSS 而 不 采用 任何 表格 实现 布局 。 


4.2 认识 DIV 


42.4 DIV 是 什么 


DIV 与 其 他 XHTML 标签 一 样 是 一 个 XHTML 所 支持 的 标签 , 当 用 户 采用 一 个 表 
格 时 ,与 应 用 <Table></Table> 这 样 的 结构 一 样 , DIV 在 使 用 的 时 候 也 是 以 <Div></Div> 
这 样 的 形式 出 现 。DIV 是 一 个 容器 ， 我 们 知道 ，XHTML 页 面 中 的 每 一 个 标签 对 象 
几乎 都 可 以 称 得 上 是 一 个 容器 ， 如 使 用 H1l 标题 对 象 : 

<H1> 厚 溥 教育 </h1> 


hl 作为 一 个 容器 ， 其 中 放置 了 内 容 ， 同 时 DIV 也 是 一 个 容器 ， 能 够 放置 内 容 ， 
例如 : 


<div>HTML 网 页 设计 </div> 


DIV 是 XHTML 中 指定 的 ， 专 门 用 于 布局 设计 的 容器 对 象 。 我 们 知道 ， 在 传统 
的 表格 布局 中 之 所 以 能 进行 页 面 的 排版 布局 设计 ， 完 全 依赖 于 表格 对 象 table， 在 页 
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面 中 绘制 一 个 或 多 个 单元 格 组 成 的 表格 ， 再 在 相应 的 表格 中 放 入 内 容 。 通 过 表格 单 
元 格 的 位 置 控制 ， 达 到 实现 布局 排版 的 目的 ， 这 是 表格 式 布局 的 核心 内 容 ， 而 在 今 
天 ， 我 们 所 要 接触 的 是 一 种 全 新 的 布局 方式 一 一 CSS 布局 ， 这 种 布局 的 核心 对 象 则 
是 DIV， 我 们 的 页 面 排版 不 需要 依赖 表格 ， 仅 从 DIV 的 使 用 上 说 ， 做 一 个 简单 的 布 
局 只 需要 依赖 两 样 东 西 : DIV 和 CSS， 因 此 也 有 人 称 CSS 布局 为 DIV+CSS。 


4.2.2 ”如 何 使 用 DIV 


与 其 他 XHTML 对 象 一 样 ， 我 们 只 需要 应 用 <div></div> 这 样 的 标签 形式 ， 将 内 容 
放置 其 中 ， 便 可 以 应 用 DIV 标签 ， 但 是 请 注意 一 点 ，DIV 标签 只 是 一 个 表示 ， 作 用 是 
把 内 容 表 示 成 一 个 区 域 ， 并 不 负责 其 他 事情 。DIV 只 是 CSS 布局 工作 的 第 一 步 ， 需 要 
通过 DIV 将 页 面 中 的 内 容 元 素 标记 出 来 ， 如 需要 一 个 导航 条 就 可 以 使 用 DIV 标识 出 一 
个 导航 条 的 区 域 ， 而 导航 条 是 什么 样 ，DIV 不 负责 ， 剩 下 的 事情 由 css 来 处 理 。 

DIV 对 象 中 除了 可 以 直接 放 入 文本 ， 也 可 以 放 入 其 他 标签 ， 还 可 以 是 多 个 DIV 
标签 进行 嵌 套 使 用 ， 最 终 的 目的 是 合理 地 标识 出 我 们 的 页 面 区 域 。 

DIV 对 象 在 使 用 时 , 同 其 他 XHTML 对 象 一 样 , 可 以 加 入 其 它 属性 , 如 ID CLASS, 
ALIGN, STYLE 等 。 而 在 CSS 布局 方面 , 为 了 实现 内 容 与 表现 的 分 离 , 不 应 当 将 ALIGN 
对 齐 属性 与 STYLE 行 间 样式 属性 编写 在 XHTML 页 面 的 DIV 标签 之 中 ， 因 此 ，DIV 
最 终 代 码 只 可 能 拥有 以 下 两 种 形式 : 


<div id="id 名 称 "> 厚 溥 教育 </div> 
<div class="class">HTML 网 页 设计 </div> 


使 用 ID 属性， 可 以 为 当前 DIV 指定 一 个 ID 名 称 ， 而 在 CSS 中 使 用 ID 选择 符 进 
行 样 式 编写 , 同样 可 以 使 用 CLASS 属性 , 在 CSS 中 使 用 CLASS 选择 符 进行 样式 编写 。 


不 管 是 应 用 于 DIV 还 是 其 他 对 象 的 id 中 ， 同 一 个 名 称 的 id 值 在 当前 
xhtml 页 面 中 ， 只 允许 使 用 一 次 ， 而 class 名 称 则 可 以 重复 使 用 。 
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4.2.3 理解 DIV 
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在 一 个 没有 任何 CSS 应 用 的 页 面 中 ， 即 使 应 用 了 DIV， 也 没有 实际 效果 ， 就 如 
同 直接 打上 了 DIV 中 的 内 容 一 样 。 那 么 该 如 何 理解 DIV 在 布局 上 所 带 来 的 不 同 呢 ? 

我 们 知道 ， 在 设计 表格 时 ， 使 用 表格 设计 的 左右 分 栏 或 上 下 分 栏 ， 都 能 够 在 浏 
览 器 预览 中 直接 看 到 分 栏 的 效果 。 

表格 自身 的 代码 形式 ， 决 定 了 在 浏览 器 中 显示 的 时 候 ， 两 块 内 容 分 别 显示 在 左 
单元 格 与 右 单元 格 之 中 ， 因 此 ， 不 管 是 否 应 用 了 表格 线 ， 都 可 以 明确 地 知道 内 容 存 
在 于 两 个 单元 格 之 中 ， 都 会 达到 分 栏 的 效果 。 而 DIV 布局 的 头 一 个 代码 可 能 会 让 我 
们 失望 ， 先 来 尝试 编写 两 个 DIV， 用 于 左 分 栏 与 右 分 栏 ， 代 码 如 下 : 


<div> 左 分 栏 </div> 

<div> 右 分 栏 </div> 

而 此 时 在 浏览 器 中 能 够 看 到 的 仅仅 是 出 现 了 两 行文 字 , 并 没有 显示 DIV 的 任何 
特征 ， 实 际 上 这 样 的 效果 带 给 我 们 两 个 信息 。 

首先 ， 我 们 发 现 ; “ 左 分 栏 ” 与 “ 右 分 栏 ”这 两 段 文字 不 是 并 排放 置 ， 而 是 上 
下 放置 ， 这 说 明 DIV 对 象 本 身 是 占据 整 行 的 一 种 对 象 ， 不 允许 其 他 对 象 与 它 在 一 行 
中 并 列 显示 ， 用 W3C 的 官方 话 来 说 就 是 ，DIV 是 一 个 block 对 象 一 一 块 状 对 象 (或 者 
称 为 块 级 元 素 )。XHTML 中 的 所 有 对 象 几乎 都 默认 为 两 种 类 型 

(1) block 块 状 对 象 ” 块 状 对 象 指 的 是 当前 对 象 显示 为 一 个 方块 ， 默 认 的 显示 状 
态 下 ， 将 占据 整 行 ， 其 他 的 对 象 在 下 一 行 显示 。 

(2) in-line 行 间 对 象 (或 者 称 为 内 联 元 素 ) in-line 行 间 对 象 相反 ， 它 允许 下 一 个 
对 象 与 它 本 身 在 一 行 中 进行 显示 。 

块 状 的 DIV 也 说 明 DIV 在 页 面 中 并 非 用 于 类 似 于 文本 一 样 的 行 间 排版 ， 而 是 
用 于 大 面积 、 大 区 域 的 块 状 排版 。 

其 次 ， 从 页 面 效 果 中 可 以 发 现 ， 网 页 之 中 ,除了 文字 之 外 ,没有 任何 其 他 效果 。 
两 个 DIV 之 间 的 关系 ， 只 是 前 后 关系 ， 并 没有 出 现 类 似 表格 的 田 字 型 的 组 织 形式 ， 
因此 可 以 说 ，DIV 本 身 与 样式 没有 任何 关系 ,样式 需要 编写 CSS 来 实现 ， 因 此 DIV 
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对 象 应 当 说 从 本 质 上 实现 了 与 样式 的 分 离 。 

这 样 做 的 好 处 是 ， 由 于 与 样式 分 离 ， DIV 的 最 终 样式 由 我 们 根据 CSS 的 功能 
编写 。 可 以 设置 为 左右 分 栏 的 样式 , 也 可 以 设置 为 上 下 分 栏 的 样式 , 而 表格 则 不 行 ， 
当 定义 了 表格 为 2X4 的 版 式 时 ， 就 不 太 可 能 直接 将 其 转换 为 4X2 或 其 他 单元 格 组 
织 形式 。DIV 的 这 种 与 样式 无 关 的 特性 ， 使 得 DIV 在 设计 中 拥有 巨大 的 可 伸缩 性 ， 
可 以 根据 自己 的 想法 来 改变 DIV 的 样式 ， 不 再 拘泥 于 单元 格 固定 模式 的 束缚 。 
因此 , 在 CSS 布局 之 中 所 需要 的 工作 可 以 简单 归 集 为 两 个 步骤 : 首先 使 用 DIV 
将 内 容 标 记 出 来 ， 然 后 在 这 个 DIV 中 编写 我 们 所 需要 的 CSS 样式 。 


424 并列 与 找 套 DIV 结构 


1. 并 列 DIV 


在 DIV+CSS 设计 网 页 中 ,经常 需要 设置 多 个 DIV 并 列 排列 ,往往 是 使 用 float:left 
BÈ float:right 来 实现 。 但 问题 出 现 了 ， 当 前 面 并 列 的 多 个 DIV 总 宽度 不 足 100% 时 ， 
下 面 的 DIV 就 很 可 能 向 上 提 ， 和 上 一 行 并 列 的 DIV 排 在 同一 行 ， 这 不 是 我 们 想 要 
的 结果 。 使 用 Clear 属性 正好 可 以 解决 这 一 问题 。 

当 图 片 和 文字 元 素 出 现在 另外 的 元 素 中 时 ， 它 们 (图 片 和 文字 ) 称 为 浮动 元 素 
(floating element), {ËH clear 属性 可 以 让 元 素 边 上 不 出 现 其 他 浮动 元 素 。 


<style type="text/css"> 
.LeftText{ 
margin: 3px; 
float: left; 
height: 180px: 
width: 170px: 
border: 1px solid #B1ID1CE: 
background-color: #F3F3F3: 
} 
-FootText{ 
height: 180px: 
} 
.Clear 


{ 
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clear:both; 

J 

</style> 


<div class="LeftText"> 区 块 1</div> 
<div class="LeftText"> 区 块 2</div> 
<div class="Clear"></div> 

<div class="FootText"> 区 块 3</div> 


如 果 没 有 Clear 这 一 层 ，“ 区 块 3” 会 紧 接 “区 块 2” 并 列 在 同一 行 。 加 了 Clear 
层 后 ,会 把 上 面 的 浮动 DIV 的 影响 清除 ， 使 其 不 至 影响 下 面 DIV 的 布局 。 


2. RE DIV 
DIV 可 以 多 层 进 行 嵌 套 使 用 ， 顽 套 的 目的 是 为 了 实现 更 为 复杂 的 页 面 排版 。 例 如 ， 


当 设计 一 个 网 页 时 ， 首 先 要 有 整体 布局 ， 需 要 产生 头 部 、 中 部 和 底部 ， 这 也 许 会 产 


生 一 


-个 较 复 杂 的 DIV 结构 


<div id="header"> 厚 溥 教育 优化 </div> 
<div id="center"> 

<div id="left">Hopeful</div> 

<div id="right">HTML</div> 

</div> 

<div id="footer"> F RKA </div> 


在 代码 中 我 们 为 每 个 DIV 定义 了 ID 和 名 称 以 供 识别 。 可 以 看 到 ID X header, 


center 和 footer 的 3 个 DIV 对 象 ， 它 们 之 间 属 于 并 列 关 系 ， 一 个 接着 一 个 。 它 们 在 


网 页 


局 ， 


的 布局 结构 之 中 ， 属 于 水 平方 向 的 布局 。 
而 在 center 之 中 ， 为 了 内 容 需要 ， 我 们 有 可 能 在 center 中 使 用 一 个 左右 栏 的 布 
因此 ， 在 center 之 中 我 们 拥有 两 个 ID 分 别 为 left 与 right 的 DIV。 这 两 个 DIV 


本 身 是 并 列 关 系 ， 而 它们 都 处 于 center 之 中 ， 因 此 它们 与 center É T IREK 


系 。 


如 果 它 们 两 个 将 被 样式 控制 为 左右 显示 的 话 ， 那 么 它们 最 终 的 布局 关系 应 当 为 


垂直 方向 的 布局 。 


而 我 们 的 网 页 布局 ， 则 将 由 这 些 嵌 套 着 的 DIV 来 构成 , 无 论 是 多 么 复杂 的 布局 


方法 ， 都 可 以 使 用 DIV 之 间 的 并 列 与 嵌 套 来 实现 。 
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关系 进行 解析 。 


425 使 用 合适 的 对 象 来 布局 


可 能 会 发 生 这 样 的 情况 , 在 header 区 域 中 , 有 必要 显示 网 页 标题 , 但 因为 header 
区 域 之 中 除了 标题 ， 可 能 还 有 其 他 对 象 出 现 ， 如 导航 菜单 等 。 因 此 从 布局 关系 上 来 
看 ， 我 们 需要 两 个 对 象 来 分 别 标识 header 之 中 的 这 两 个 元 素 。 当 然 ， 这 可 以 使 用 
DIV 来 完成 ， 其 代码 结构 如 下 所 示 : 


<div id="header"> 

<div id="title"> 厚 溥 教 育 </div> 

<div id="nav">HTML 网 页 设计 </div> 

</div> 

这 样 编写 代码 可 以 吗 ? 答案 是 可 以 ， 而 且 从 语法 上 来 说 没有 任何 错误 ， 符 合 布局 
的 规范 。 但 是 ， 从 网 页 结构 与 优化 上 来 看 ， 这 种 做 法 是 不 科学 的 。XHTML 的 所 有 标签 
之 中 ， 不 仅 有 DIV， 还 有 其 他 标签 ， 而 每 个 标签 都 有 自己 的 作用 。 虽 然 我 们 可 以 完全 
使 用 DIV 来 构建 布局 ， 但 组 成 的 页 面 将 是 一 个 全 由 DIV 组 成 的 网 页 ， 最 终 带 给 我 们 的 
可 读 性 并 不 高 ， 全 篇 的 DIV 反而 成 了 复杂 的 没有 任何 含义 的 代码 。 正 确 的 做 法 是 选用 
符合 需要 的 其 他 XHTML 标签 ， 合 理 地 蔡 代 DIV， 改 进 后 的 代码 如 下 : 


<div id="header"> 

<hl> 厚 溥 教育 </h2> 

<ul> HTML 网 页 设计 </u2> 

</div> 

我 们 知道 ，h1-h6 表示 标题 1 号 字 到 标题 6 号 字 ， 因 此 使 用 hl 标签 来 作为 标题 
用 的 元 素 再 合适 不 过 。 而 导航 条 一 般 由 多 个 导航 项 组 成 ,ul 列表 正好 可 以 满足 这 样 
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的 需求 ， 因 此 我 们 可 以 使 用 ul 对 象 来 标识 导航 条 ， 再 使 用 1 对 每 个 导航 项 进行 标 
识 ， 这 样 就 组 成 了 新 的 代码 结构 。Web 标准 推荐 使 用 尽 可 能 符合 页 面 中 元 素 意义 的 
标签 来 标识 元 素 ， 在 以 往 的 表格 布局 之 中 ， 无 论 是 hl 还 是 ul， 这 些 元 素 几乎 都 不 
常见 到 ， 主 要 原因 就 是 所 有 的 对 象形 式 都 被 表格 所 蔡 代 ， 页 面 可 读 性 差 ， 也 没有 任 
何 伸缩 性 可 言 。 而 在 CSS 布局 之 中 ,要 求 我 们 尽 可 能 多 地 去 使 用 XHTML 所 支持 的 
各 种 标签 ， 最 终 网 页 对 象 都 将 拥有 良好 的 可 读 性 ， 通 过 css 的 进一步 定义 ， 其 样式 
表现 能 力 丝毫 不 比 表格 差 ， 而 且 拥 有 比 表 格 高 出 许多 的 样式 控制 方法 。 这 也 是 CSS 
布局 的 基本 优势 。 
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4.3.1 什么 是 盒 模型 


CSS 定义 所 有 的 元 素 都 可 以 拥有 像 盒 子 一 样 的 外 形 和 平面 空间 ， 即 都 包含 边界 、 边 
框 、 补 白 、 内 容 区 域 和 背景 (包括 背景 色 和 背景 图 像 )， 这 就 是 盒 模型 。 盒 模型 如 同 工 厂 
模具 一 样 ， 它 规范 了 网 页 元 素 的 显示 基础 。 盒 模型 关系 到 网 页 设计 中 的 排版 、 布 局 、 
定位 等 操作 ， 任 何 一 个 元 素 都 必须 遵循 盒 模型 规则 ， 如 div. span. hl-h6, p.strong 等 。 


432 ” 盒 模 型 的 细节 


W3C 组 织 建议 把 所 有 网 页 上 的 对 象 都 放 在 一 个 盒 (boxg) 中 ， 设 计 师 可 以 通过 创建 
定义 来 控制 这 个 盒 的 属性 ， 这 些 对 象 包括 段落 、 列 表 、 标 题 、 图 片 以 及 层 。 盒 模型 主 
要 定义 4 个 区 域 : 内 容 (content)、 边 框 距 (padding)、 边 界 (border) 和 边 距 (margin)。 

这 里 提供 两 张 盒 模型 的 示意 图 ， 便 于 理解 和 记忆 ， 如 图 4-2 和 图 4-3 所 示 。 
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图 4-2 盒 模型 细节 1 
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每 个 HTML 元 素 都 可 以 看 作 一 个 装 了 东西 的 盒子 , 盒子 里 面 的 内 容 到 盒子 边框 
之 间 的 距离 即 填充 (padding)， 盒 子 本 身 有 边框 (bordeD， 而 盒子 边框 外 和 其 他 盒子 之 
间 还 有 边界 (margin)。 


4.3.3 ET margin 又 加 问题 


边界 车 加 是 一 个 相当 简单 的 概念 。 但 是 ， 在 实践 中 对 网 页 进行 布局 时 ， 它 会 造 
成 许多 混淆 。 简 单 地 说 ， 当 两 个 垂直 边界 相遇 时 ， 它 们 将 形成 一 个 边界 。 这 个 边界 
的 高 度 等 于 两 个 发 生 车 加 的 边界 的 高 度 中 的 较 大 者 。 

下 面 是 发 生 车 加 的 几 种 情况 : 

(1) 元 素 的 项 边界 与 前 面 元 素 的 底 边 界 发 生 羡 加 ， 如 图 4-4 所 示 。 
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图 4-4 边界 县 加 1 


D 元 素 的 项 边界 与 父 元 素 的 项 边界 发 生 三 加 ， 如 图 4-5 所 示 。 
委 加 之 前 委 加 之 后 


margin-top : 30px ZAE margin-top : 30px 


— asas serran 
| 内 容 | 


4-5 ”边界 登 加 2 


(3) 元 素 的 顶 边界 与 底 边 界 发 生姜 加 ， 如 图 4-6 所 示 。 


得 加 之 后 


4-6 ”边界 登 加 3 


(4) 空 元 素 中 已 经 登 加 的 边界 与 另 一 个 空 元 素 的 边界 发 生 登 加 ， 如 图 4-7 所 示 。 


得 加 之 前 amA 
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图 4-7 AREH 4 


(5) 边界 登 加 在 元 素 之 间 维 护 了 一 致 的 距离 ， 如 图 4-8 所 示 。 
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4.3.4 ÆA margin 加 倍 问题 
当 box 28 float IF, IE 6 中 box 左右 的 margin 会 加 倍 。 比 如 : 


<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 左 右 margin 加 倍 </title> 

<style> 

„outer í 

width:S00px: 

height:200px: 

background:#000: 

} 

.inner { 

float:left; 

width:200px: 

height:100px: 

margin:5px: 

background:#fff. 

) 

</style> 

</head> 

<body> 

<div class="outer"> 

<div class="inner"></div> 

<div class="inner"></div> 

</div> 
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</body> 
</html> 


左边 的 inner 的 左面 margin 明显 大 于 5px- 
这 时 候 ， 定 义 inner 的 display 属性 为 mline， 可 以 解决 该 问题 。 


4.4 深入 浮动 


深入 浮动 (float) 属 性 用 于 定义 元 素 在 哪个 方向 浮动 ， 以 往 这 个 属性 总 是 应 用 于 
图 像 ， 使 文本 围绕 在 图 像 周围 ， 不 过 在 CSS 中 ， 任 何 元 素 都 可 以 浮动 。 浮 动 元 素 会 
生成 一 个 块 级 框 ， 而 不 论 它 本 身 是 何 种 元 素 。 


444 文档 流 


文档 流 (Document Flow) 将 窗 体 自 上 而 下 分 成 一 行 行 ， 并 在 每 行 中 按 从 左 至 右 的 
顺序 排放 元 素 。 

文档 流 分 为 两 种 ， 分 别 是 : 

。 普通 文档 流 

我 们 打开 网 页 时 ， 都 是 上 方 的 部 分 首先 显示 出 来 ， 然 后 是 中 间 部 分 ， 最 后 才 是 
底部 ， 直 到 显示 完成 。 这 样 的 顺序 体现 在 HTML 代码 中 就 是 先 写 的 标签 先 显示 ， 后 
写 的 标签 后 显示 。 整 个 过 程 好 像 瀑布 的 水 从 上 到 下 ， 因 此 命名 为 普通 文档 流 。 

。 特殊 文档 流 

特殊 文档 流 指 那些 在 页 面 载 入 浏览 器 的 时 候 ， 不 按照 前 面 所 讲述 的 顺序 ， 脱 离 
普通 文档 流 而 单独 显示 的 标签 。 还 是 利用 瀑布 来 举例 ; 瀑布 倾泻 而 下 的 时 候 ， 部 分 
水 流 碰 到 了 岩石 ， 导 致 下 落 方向 与 瀑布 主题 不 同 ， 它 们 就 可 以 叫做 特殊 文档 流 。 

每 个 非 浮动 块 级 元 素 都 独占 一 行 ， 浮 动 元 素 则 按 规定 浮 在 行 的 一 端 。 若 当前 行 
容 不 下 ， 则 另 起 新 行 再 浮动 。 

内 联 元 素 也 不 会 独占 一 行 ， 几 乎 所 有 元 素 ( 包 括 块 级 、 内 联 和 列表 元 素 ) 均 可 生 
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成 子 行 ， 用 于 摆 放 子 元 素 。 

有 3 种 情况 将 使 得 元 素 脱离 文档 流 而 存在 , 分 别 是 浮动 、 绝 对 定位 、 固 定 定位 。 
但 是 在 正中， 浮动 元 素 也 存在 于 文档 流 中 。 

浮动 元 素 不 占 任何 正常 文档 流 空间 ， 浮 动 元 素 的 定位 还 是 基于 正常 的 文档 流 ， 
然后 从 文档 流 中 抽出 并 尽 可 能 远 地 移 动 至 左 侧 或 者 右 侧 ， 文 字 内 容 会 围绕 在 浮动 元 
素 周围 。 当 一 个 元 素 从 正常 文档 流 中 抽出 后 ， 仍 然 在 文档 流 中 的 其 他 元 素 将 忽略 该 
元 素 并 填补 它 原 先 的 空间 。 

浮动 概念 让 人 迷惑 的 根源 在 于 浏览 器 对 理论 的 解读 。 只 能 说 , 很 多 人 以 IE 做 标准 ， 
其 实 它 不 是 。 

基于 文档 流 ， 我 们 可 以 很 容易 地 理解 以 下 的 定位 模式 

(1) 相对 定位 : 即 相对 于 元 素 在 文档 流 中 的 位 置 进行 偏 移 ， 但 保留 原 占 位 。 

(2) 绝对 定位 : 即 完 全 脱离 文档 流 ， 相 对 于 position 属性 非 static 值 的 最 近 父 级 
元 素 进行 偏 移 。 

(3) 固定 定位 : 即 完 全 脱离 文档 流 ， 相 对 于 视 区 进行 偏 移 。 


44.2 浮动 定位 


浮动 的 框 可 以 向 左 或 向 右 移动 ， 直 到 它 的 外 边缘 碰 到 包含 框 或 男 一 个 浮动 框 的 
边框 为 止 。 由 于 浮动 框 不 在 文档 的 普通 流 中 ， 所 以 文档 普通 流 中 的 块 框 表现 得 就 像 
浮动 框 不 存在 一 样 。 

当 把 框 1 向 右 浮动 时 ， 它 脱离 文档 流 并 且 向 右 移动 ， 直 到 它 的 右边 缘 碰 到 包含 
框 的 右边 缘 ， 如 图 4-9 所 示 。 
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当 框 1 向 左 浮动 时 ， 它 脱离 文档 流 并 且 向 左 移动 , 直到 它 的 左边 缘 碰 到 包含 框 的 
左边 缘 。 因 为 它 不 再 处 于 文档 流 中 ， 所 以 它 不 占据 空间 ， 实 际 上 覆盖 住 了 框 2， 使 杠 
2 从 视图 中 消失 。 如 果 把 3 个 框 都 向 左 移动 ， 那 么 框 1 向 左 浮动 直到 碰 到 包含 框 ， 另 
外 两 个 框 向 左 浮动 直到 碰 到 前 一 个 浮动 框 ， 如 图 4-10 所 示 。 


ü 1 向 左 主动 所 有 三 个 框 和 左 译 动 
[| 0 1 
IE i Ñ ir Ta i 1 
i + hein i! < I < | + | | 
H " 1 I ! 
| | SENE E | 
V | 1 

i] 1 I 

i | 1 

I! sl I 

l I 

l 1 

l 1 

l 

l 
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4-10 浮动 框 的 覆盖 


如 图 4-11 所 示 ， 如 果 包 含 框 太 窗 ， 无 法 容纳 水 平 排列 的 3 个 浮动 元 素 ， 那 么 其 
他 浮动 块 将 向 下 移动 ， 直 到 有 足够 的 空间 。 如 果 浮 动 元 素 的 高 度 不 同 ， 那 么 当 它 们 
向 下 移动 时 可 能 被 其 他 浮动 元 素 “ 卡 住 ”。 


É 1 向 左 主动 所 有 三 个 框 向 左 浮动 
| | | | 
| I l! 1 l! < |! 1 ! 
I! mill 框 21 11 l 框 21 | 
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4-11 浮动 框 的 卡 位 


我 们 举 个 简单 的 例子 ，HTML 代码 如 下 : 


<html> 

<head> 

<style type="text/css"> 
img 

{ 

float:right 

} 

</style> 


. 448. 


k -5 
第 4 章 CSS 网 页 布局 与 定位 


</head> 

<body> 

<p> 在 下 面 的 段落 中 ， 我 们 添加 了 一 个 样式 为 <b>floatright</b> 的 图 像 。 结 果 是 这 个 图 像 会 
浮动 到 段落 的 右 侧 。</p> 

= 

<img src="img/eg_cute.gif" /> 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
</p> 

</body> 

</html> 


显示 效果 如 图 4-12 所 示 。 


tnl ~ Windows Internet Explorer 


文件 (E) ABOO TO *@ IAD ED 
eee- s- OOA aR awr @ms aly a-e 


HEO (E) E: art 网 页 设计 \ 第 四 章 \ 理 论 \4-12.htnl z| era wr” 


在 下 面 的 段落 中 ， 我 们 添加 了 一 个 样式 为 float :right 的 图 像 。 结 果 是 这 个 图 像 会 浮动 到 段落 的 右 侧 。 
This is some text，This is some text，This is some text，This is some text，This is some = 


text. This is some text. This is some text. This is some text. This is some text. This is 
some text. This is some text. This is some text. This is some text. This is some text. 

This is some text. This is some text. This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. This is some text. This is some text. 


4-12 图 片 的 浮动 定位 


4.4.3 浮动 的 清 


浮动 的 清理 (clearn) 属 性 规定 元 素 的 哪 一 侧 不 允许 其 他 浮动 元 素 出 现 。 表 4-1 列 出 
了 clear 属性 值 。 
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表 4-1 clear 属性 值 


BHE # 述 
left | 在 左 侧 不 允许 出 现 浮动 元 素 
Ta | 在 右 侧 不 允许 出 现 浮动 元 素 
both | 在 左右 两 侧 均 不 允许 出 现 浮动 元 素 
idie | 默认 值 。 允 许 浮动 元 素 出 现在 两 侧 
inherit 规定 应 该 从 父 元 素 继承 clear 属性 的 值 


例如 ， 图 像 的 左 侧 和 右 侧 均 不 允许 出 现 浮动 元 素 : 


<html> 

<head> 

<style type="text/css"> 

img 

Á 

float:left; 

clear:both; 

j 

</style> 

</head> 

<body> 

<img src="img/eg_cute.gif"" /> 
<img src="img/eg_cute.gif" /> 
</body> 

</html> 


4.4.4” 何 时 选用 浮动 定位 


DIV 浮动 定位 的 本 意 是 要 将 插入 到 文章 中 的 图 片 向 左 或 者 向 右 浮动 ， 使 图 片 下 
方 的 文字 自动 环绕 在 它 的 周围 ， 且 图 片 的 左边 或 者 右边 不 会 出 现 大 块 的 留 白 。DIV 
浮动 定位 的 语法 虽然 简单 ， 但 却 不 那么 容易 掌握 ， 下 面 让 我 们 举例 说 明 如 何 用 浮动 
来 进行 布局 。 同 样 ， 我 们 要 实现 一 个 带 页 脚 的 三 栏 布 局 ， 如 图 4-13 所 示 。 
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图 4-13 DIV 浮动 页 面 布局 图 


如 何 用 DIV 浮动 定位 实现 这 样 的 效果 呢 ? 

其 实 很 简单 : 

(1) 设 定 三 的 宽度 ， 让 王 居 中 。 

(2) 设 定 A、B、C 的 宽度 ， 将 A、B、C 分 别 向 左 浮动 。 
(3) 给 页 眉 、 页 脚 设 置 clear 属性 。 

我 们 来 看 下 面 的 例子 ，HTML 代码 如 下 : 


<html> 

<head> 

<style type="text/css"> 
div.container 

f 

width:100%; 
margin:0px: 
border:1px solid gray; 
line-height:150%; 

} 
div.header.div.footer 

í 

padding:0.5em; 
color:white; 
background-color:gray; 
clear:left: 

} 

hl.header 

{ 
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padding:0; 
margin:0; 

} 

div.left 

Í 

float:left; 
width:160px; 
margin:0; 
padding:1em; 

} 

div.content 

{ 
margin-left:190px; 
border-left: 1px solid gray; 
padding:lem: 

) 

</style> 

</head> 


> 


<div class="header"> 

<h1 class="header">W3School.com.cn</h1> 
</div> 

<div class="left"> 


<p>"Never increase, beyond what is necessary, the number of entities required to explain 
anything." William of Ockham (1285-1349)</p> 

</div> 

<div class="content"> 

<h2>Free Web Building Tutorials</h2> 

<p>At W3School.com.cn you will find all the Web-building tutorials you need, 

from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> 
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p> 

</div> 

<div class="footer">Copyright 2008 by YingKe Investment.</div> 

</div> 

</body> 

</html> 


显示 效果 如 图 4-14 所 示 。 
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【小 结 】 


@ 网 站 可 以 分 为 内 容 、 表 现 、 结 构 三 部 分 
e° DIV 是 XHTML 中 指定 的 ， 专 门 用 于 布局 设计 的 容器 对 象 


通过 使 用 浮动 定位 来 对 网 页 进行 排版 


[ 自 测 题 】 


1. DIV+CSS 的 优势 有 哪些 ? (  ) 


A. 表现 和 内 容 相 分 离 B. 提高 搜索 引擎 对 网 页 的 索引 效率 


C. 代码 简洁 ， 提 高 页 面 浏览 速度 。” D. 易于 维护 和 改版 


盒 模型 主要 属性 : 内 容 (content) 边框 距 (padding》 边 界 (border) 和 边 距 (margin) 
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2. 如 果 要 使 多 个 DIV 并 列 排列 ， 应 使 用 —)- 


A. margin B. content 
C. float D. clear 

3. 下 面 哪个 属性 是 指 盒 模型 的 边 距 ? ( ) 
A. content B. padding 
C. border D. margin 


4. 在 网 页 中 ,为 了 将 HI 标题 定位 于 左边 距 为 100px、 上 边 距 为 50px 处 ， 效 果 
如 图 4-15 所 示 ， 下 面 代码 正确 的 是 ( — )。 
A. B. 


hl{ hl{ hl{ hl{ 
position:absolute; left:100px; left:100; position:absolute; 
left:100px: top:50px: top:50; left:100; 
top:50px; } } 

} 


四 无 标题 文档 - Microsoft Internet Explorer 
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5. 下 列 情况 中 ， 哪 些 会 发 生 margin 属性 的 闭 加 ? ( ) 
A. 元 素 的 顶 边 界 与 前 面 元 素 的 底 边 界 发 生 登 加 
- 元 素 的 顶 边 界 与 父 元 素 的 项 边界 发 生 芍 加 
- 元 素 的 顶 边界 与 底 边 界 发 生 合 加 
. 空 元 素 中 已 经 营 加 的 边界 与 男 一 个 空 元 素 的 边界 发 生 蕉 加 


w 


Q 


g 
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【上 机 部 分 】 


上 机 目标 


掌握 用 CSS+DIV 进行 网 页 布局 
° 学 会 使 用 使 模型 对 页 面 元 素 进 行 定位 


上 机 练习 
+ 第 一 阶段 + 


练习 1: 用 DIV 布局 


【问题 描述 】 
用 DIV 对 如 图 4-16 所 示 的 网 页 框架 进行 布局 ， 包 括 Banner 图 片 、 导 航 条 、 左 
侧 的 导购 信息 以 及 主体 部 分 的 产品 展示 等 。 


#globallink 


4-16 DIV 布局 


【问题 分 析 】 
图 4-16 中 的 各 个 部 分 直接 采用 了 HTML 代码 中 各 个 <div> 块 对 应 的 id。 其中， 
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#banner 块 对 应 页 面 上 部 的 banner 图 片 ，#global link 则 是 网 站 的 导航 菜单 栏 ， 礁 eft 与 
#main 是 页 面 的 主体 块 ， 相 应 的 代码 框架 如 下 

<div id="container"> 

<div id="banner"><img src="banner.jpg"></div> 

<div id="global link"></div> 

<div id="left"></div> 

<div id="main"></div> 

</div> 


练习 2: 浮动 定位 显示 


【问题 描述 】 
在 练习 1 的 基础 上 把 主 模块 和 左 侧 模块 加 以 细 化 ， 如 图 4-17 所 示 。 


#main 


图 4-17 浮动 定位 显示 


【问题 分 析 】 

Het 包含 登录 系统 以 及 产品 的 分 类 信息 ，#main 块 则 主要 包括 本 站 快讯 、 产 品 
推荐 、 新 品 上 市 和 产品 导购 等 。 

参考 代码 : 


<div id="left"> 
<div id="login"></div> 
<div id="category"></div> 
</div> 
<div id="main"> 
<div id="latest"></div> 
<div 
<div id="new"></div> 
<div id="tips"></div> 
</div> 


"recommend"></div> 
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+ 第 二 阶段 e 


练习 3: 利用 CSS 的 属性 实现 练习 1 和 练习 2 的 图 示 效 果 


【问题 描述 】 
通过 本 章 学 习 的 知识 点 ， 实 现 前 面 的 练习 ， 效 果 如 图 4-18 所 示 。 


D: \ 教 学 \ 第 四 章 \ 布 局 htal - Windovs Internet Explorer 


GIS; jE D: \ 教 学 \ 第 四 章 \ 布 局 htal EUA REG 


XAD MED FEV KERO IAW 帮助 中 


ER DAER. htnl 


JC Store Fine Jewelry, Value and Expert Advice. 


图 4-18 CSS 属性 实现 效果 图 


[ 课 后 作业 】 


模仿 新 浪 、 搜 狐 等 门户 网 站 ， 用 DIV 进行 布局 ， 如 图 4-19 所 示 。 
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本 章 讨论 CSS 的 布局 和 HTML 的 一 个 基本 标签 .HTML 标签 是 网 页 的 基本 组 成 ， 
要 实现 一 个 网 页 ， 标 签 是 必 不 可 少 的， 而 本 章 将 学 习 基 本 标签 的 用 法 ， 如 标题 标签 
和 段落 级 标签 ， 还 将 讨论 文本 格式 化 标签 、 列 表 及 如 何在 HTML 中 插入 图 像 。 

表格 是 网 页 制作 过 程 中 使 用 率 很 高 的 组 件 ， 本 章 详细 讲解 了 表格 的 用 法 。 


5.1 CSS 布局 


CSS 的 布局 是 一 种 很 新 的 布局 理念 ， 完 全 有 别 于 传统 的 布局 习惯 。 它 首先 将 页 
面 在 整体 上 进行 <div> 标 记 的 分 块 ， 然 后 对 各 个 块 进 行 CSS 定位 ， 最 后 再 在 各 个 块 
中 添加 相应 的 内 容 。 通 过 CSS 布局 的 页 面 , 更 新 十 分 容易 , 甚至 是 页 面 的 拓扑 结构 ， 
都 可 以 通过 修改 CSS 属性 来 重新 定位 。 本 节 主 要 介绍 CSS 布局 的 一 些 基本 技巧 。 


511 一 列 固 定 宽 度 


一 列 固定 宽度 是 CSS 布局 基础 中 的 基础 ， 由 于 是 固定 宽度 布局 ， 因 此 我 们 直接 
设置 了 宽度 属性 width: 300px: 与 高 度 属 性 height: 200px， 其 HTML 代码 如 下 : 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 一 列 固定 宽度 </title> 
<style type="text/css"> 
<!-- 
#layout í 
border: 2px solid #A9C9E2: 
background-color: #E8F5FE: 
height: 200px: 
width: 300px: 
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</style> 

</head> 

<body> 

<div ia="layout"> 一 列 固定 宽度 </div> 


</body> 
</html> 


采用 Dreamweaver 可 视 化 开发 ， 具 体 步 骤 如 下 : 

(1) 打开 Dreamweaver， 选 择 一 个 网 页 文件 。 

(2) 插入 一 个 ID X layout 的 divo 

(8) 在 CSS 面板 中 新 建 CSS 样式 ，CSS 样式 的 设置 如 图 5-1 一 图 5-3 所 示 。 


j 


#layout 的 CSS 规则 定义 


图 5-2 css 样式 的 方 框 设 置 对 话 框 
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#1ayout 的 _CSS 规则 定义 2 


—m | smw | ww | 
图 5-3 css 样式 的 边框 设置 对 话 框 


5.1.2 一列 自 适 应 宽度 


自 适应 布局 是 网 页 设计 中 常见 的 布局 形式 ， 自 适应 的 布局 能 够 根据 浏览 器 窗口 
的 大 小 ， 自 动 改变 其 宽度 值 和 高 度 值 ， 是 一 种 非常 灵活 的 布局 形式 。 良 好 的 自 适 应 
布局 网 站 对 不 同 分 辨 率 的 显示 器 都 能 提供 最 好 的 显示 效果 。 实际 上 DIV 默认 状态 下 
占据 整 行 的 空间 ， 便 是 宽度 为 100% 的 自 适应 布局 的 表现 形式 。 一 列 自 适应 布局 需要 
我 们 做 的 工作 也 非常 简单 ， 只 需要 将 宽度 由 固定 值 改 为 百分比 值 的 形式 即 可 。 

CSS 大 部 分 用 数值 作为 参数 的 样式 属性 都 提供 了 百分比 ，width 宽度 属性 也 不 例 
外 ， 在 这 里 我 们 将 宽度 由 一 列 固定 宽度 的 300px 改 为 80%， 从 下 边 的 预览 效果 中 可 
以 看 到 ，DIV 的 宽度 值 已 经 变 为 浏览 器 宽度 的 80%。 自 适应 的 优势 就 是 当 扩 大 或 缩 
小 浏览 器 窗口 大 小 时 ， 还 将 维持 与 浏览 器 当前 宽度 的 比例 。 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 

<title> 一 列 自 适应 宽度 </title> 

<style type="text/css"> 

ami: 

border: 2px solid #A9C9E2: 


background-color: #E8F5FE: 
height: 200px: 
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width: 80%: 
J 
--> 
</style> 
</head> 
<body> 
<div id="layout"> 一 列 自 适 应 宽度 </div> 
</body> 
</html> 


具体 操作 步骤 请 参考 5.1.1 小 节 。 
只 需 在 设置 宽度 时 ， 将 原来 的 300px 改 为 80% 即 可 ， 如 图 5-4 所 示 。 


全 部 相同 人) MEZ 
上 :三 Jerr J tof Jere z] 
有 加 :三 Jek 4o: Jere zJ 
Tt: [/ Jer z] Fe:[ Jere z] 
#o:[ Jee 可 #o:[ zmes zJ 


5-4 CSS 的 自 适应 宽度 设置 对 话 框 


51.3 ”一列 固定 宽度 居中 


页 面 整体 居中 是 网 页 设计 中 最 普遍 应 用 的 形式 , 在 传统 表格 布局 中 , 我 们 使 用 表 
格 的 align="center" 属 性 来 实现 。DIV 本 身 也 支持 align="center" 属 性 ， 也 可 以 使 div = 
现 居中 状态 ,但 CSS 布局 是 为 了 实现 表现 和 内 容 的 分 离 ， 而 align 对 齐 属性 是 一 种 样 
式 代码 ， 书 写 在 XHTML 的 DIV 属性 之 中 ， 有 违 分 离 原 则 (分 离 可 以 使 你 的 网 站 更 加 
利于 管理 )， 因 此 应 当 用 CSS 实现 内 容 的 居中 ， 我 们 以 一 列 固 定 宽 度 布局 代码 为 例 ， 
为 其 增加 居中 的 CSS 样式 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://wwww.w3.ore/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 


° 133 ° 


° 5 ə 
HTML 网 页 设计 


< 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 一 列 固定 宽度 居中 </title> 
<style type="text/css"> 
=p 
#layout í 
border: 2px solid #A9C9E2: 
background-color: #E8F5FE; 
height: 200px; 
width: 300px; 
margin:0px auto; 
j 
=> 
</style> 
</head> 
<body> 
<div id="layout"> 一 列 固定 宽度 居中 </div> 
</body> 
</html> 


margin 属性 用 于 控制 对 象 的 上 、 下 、 左 、 右 4 个 方向 的 外 边 距 ， 当 margin 使 用 
两 个 参数 时 ， 第 1 个 参数 表示 上 下 边 距 ， 第 2 个 参数 表示 左右 边 距 。 除 了 直接 使 用 
数值 之 外 ，margin 还 支持 auto 值 ，auto 值 可 以 使 浏览 器 自动 判断 边 距 。 在 这 里 ， 我 
们 将 当前 DIV 的 左右 边 距 设置 为 anato， 浏 览 器 就 会 将 DIV 的 左右 边 距 设 为 相等 ， 
并 呈现 为 居中 状态 ， 从 而 实现 了 居中 效果 。 

操作 步骤 和 一 列 固 定 宽 度 相同 ， 只 需 在 CSS 边框 设置 项 中 将 边界 的 上 、 右 、 下 、 
左 分 别 设置 为 0、auto、0、auto 即 可 ， 如 图 5-5 所 示 。 
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5.2 HTML 列表 


5.221 ul 无 序列 表 和 ol 有 序列 表 
无 序列 表 是 Web 标准 布局 中 最 常用 的 样式 ,其 代码 如 下 , 运行 效果 如 图 5-6 所 示 。 


<div id="layout"> 

<ul> 

<li><a title=" 第 五 天 超 链 接 伪 类 " href="/div_css/906.shtml" target="_blank" > HAR 超 链接 
伪 类 </a></li> 

<li><a title=" 第 四 天 纵向 导航 菜单 " href="/div_css/905.shtml" target=" blank"> 第 四 天 纵向 
导航 菜单 </a></li> 

<li><a title=" 第 三 天 二 列 和 三 列 布局 " href="/div_css/904.shtml" target=" blank"> 第 三 天 二 
列 和 三 列 布局 </a></li> 

<li><a title=" 第 二 天 一 列 布局 " href="/div_css/903.shtml" target=" blank"> 第 二 天 一 列 布局 
</a></li> 

<li><a title=" 第 一 天 XHTML CSS 基础 知识 " href="/div_css/902.shtml" target="”blank"> 第 
一 天 XHTML CSS 基础 知识 </a></li> 

<l 

</div> 


carme Vindows Internet Explor: 
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图 5-6 ul 无 序列 表 运 行 效果 
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这 就 是 无 序列 表 ， 是 以 由 包含 的 形式 ， 默 认 每 行 前 的 符号 是 圆 点 ， 可 以 通过 


样式 表 改 为 无 、 方 块 和 空心 圆 等 。 


有 序列 表 是 以 ol 包含 的 形式 ， 是 以 数字 为 项 目 符号 的 ， 无 序列 表 也 可 以 用 css 


定义 显示 成 有 序列 表 ， 代 码 及 显示 效果 如 下 ， 运 行 效果 如 图 5-7 所 示 。 


<div id="layout"> 

<ol> 

<li><a title=" 第 五 天 超 链 接 伪 类 " href="/div_css/906.shtml" target="_blank" "HAR 超 链接 
伪 类 </a></li> 

<li><a title=" 第 四 天 纵向 导航 菜单 " href="/div_css/905.shtml" target=" blank"> 第 四 天 纵向 
导航 菜单 </a></li> 

<li><a title=" 第 三 天 二 列 和 三 列 布局 " href="/div_css/904.shtml" target=" blank"> 第 三 天 二 
列 和 三 列 布局 </a></li> 

<li><a title=" 第 二 天 一 列 布局 " href="/div_css/903.shtml" target=" blank"> 第 二 天 一 列 布局 
</a></li> 

<li><a title=" 第 一 天 XHTML CSS 基础 知识 " href="/div_css/902.shtml" target=”blank"> 第 
一 天 XHTML CSS 基础 知识 </a></li> 

</ol> 

</div> 
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5-7 ol 有 序列 表 运 行 效果 


5.22 ”改变 项 目 符号 样式 或 用 图 片 定义 项 目 符号 
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项 目 符号 默认 是 圆 点 ， 但 是 可 以 通过 样式 表 改 为 其 他 形式 ， 如 图 5-8 所 示 。 


第 5 章 CSS 布局 和 HTML 列表 “e° 


图 5-8 改变 项 目 符号 样式 对 话 杠 


从 样式 表 编辑 器 中 可 以 看 到 ， 有 好 多 种 形式 , 包括 ol 默认 的 以 数字 有 序列 表 显 
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图 5-10 图 像 定义 项 目 符号 样式 运行 效果 
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其 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
#layout{ 
list-style-image: url(5-12.bmp): 
} 
</style> 
</head> 
<body> 
<div id="layout"> 
<ol> 
<li><a title=" 第 五 天 超 链 接 伪 类 " href="/div_css/906.shtml" target="_blank" > HAR 超 链接 
伪 类 </a></li> 
<li><a title=" 第 四 天 纵向 导航 菜单 " href="/div_css/905.shtml" target="_blank"> IKR 纵向 
导航 菜单 </a></li> 
<li><a title=" 第 三 天 二 列 和 三 列 布局 " href="/div_css/904.shtml" target=" blank"> 第 三 天 二 
列 和 三 列 布局 </a></li> 
<li><a title=" 第 二 天 一 列 布局 " href="/div_css/903.shtml" target="_blank"> ZR 一 列 布局 
</a></li> 
<li><a title=" 第 一 天 XHTML CSS 基础 知识 " href="/div_css/902.shtml" target="_blank">% 
一 天 XHTML CSS 基础 知识 </a></li> 
</ol> 
</div> 
</body> 
</html> 


523 ”横向 图 文 列 表 


横向 图 文 列表 是 在 上 一 步 的 基础 上 增加 图 片 并 让 列表 横向 排列 ， 最 终 实 现 效果 


如 图 5-11 所 示 。 
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横向 图 文 列表 的 操作 步骤 如 下 。 
(1) 先 插入 如 下 html 代码 : 


<div id="layout"> 
<ul> 

<li><a href="#"><img src=" 
<li><a href="#"><img src=' 
<li><a href="#"><img src=' 


<li><a href="#"><img sr 
<li><a href="#"><img src=' 
<li><a href="#"><img src=' 
<li><a href="#"><img src=" 


<li><a href="#"><img src=' 
<li><a href="#"><img src=' 


<li><a href="#"><img src=' 
<li><a href="#"><img src=" 三 亚 .bmp， 
三 亚 .bmp' 
三 亚 .bmp' 
三 亚 .bmp' 


<li><a href="#"><img src=' 


<li><a href="#"><img src=" 


<li><a href="#"><img src=' 
<l 
</div> 


横向 图 文 列 表 效果 图 


三 亚 .bmp" width="68" height="54" > 三 亚 </a></li> 
三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
亚 .bmp" width="68" height="54" /> 
亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
三 亚 .bmp" width="68" height="54" 户 三 亚 </a></li> 


亚 </a></li> 


" width="68" height="54" /> 三 亚 </a></li> 
" width="68" height="54" /> 三 亚 </a></li> 
" width="68" height="54" /> 三 亚 </a></li> 
" width="68" height="54" /> 三 亚 </a></li> 


(2) 接 下 来 添加 CSS 样式 。 这 是 
下 全 局 样式 : 


有 用 到 一 个 很 重要 的 CSS 属性 : float， 先 添加 如 
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body { margin:0 auto: font-size:12px; font-family:Verdana: line-height:1.5:} 
ULdLdtddhlh2.h3h4.h5.h6.form { padding:0; margin:0:} 

ul { list-style:none:} 

img { border:0px:) 

a { color:#05a; text-decoration:none:) 

a:hover { color:#f00:) 


G) 然后 如 图 $-12 一 图 5-14 所 示 让 每 个 元 素 浮动 起 来 , 这 样 就 实现 了 横向 排列 。 


ET 


A CSS 规则 定义 


图 5-14 设置 区 块 属性 
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下 面 设置 a 标签 下 图 片 的 样式 ， 如 图 $-15 一 图 5-17 所 示 。 


iag 的 CSS 规则 定义 


规则 定义 


图 5-17 设置 边框 属性 
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ce HTML 网 页 设计 


为 了 获得 更 好 的 交互 效果 ， 这 里 增加 鼠标 划 过 时 的 样式 ， 注 意 这 里 的 选择 器 写 
法 ， 如 图 5-18 一 图 5-20 所 示 。 


=a 


C | G 建 样式 表 文 件 ) 
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图 5-18 新 建 CSS 样式 


iag 的 CSS 规则 定义 
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5-19 ”设置 边框 属性 


图 5-20 设置 方 框 属性 
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最 后 生成 的 效果 如 图 5-21 所 示 。 
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图 5-21 横向 图 文 排列 效果 图 
对 应 的 代码 如 下 所 示 : 


<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.ore/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
body { margin:0 auto; font-size:12px; font-family: Verdana; line-height:1.5;} 
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6.form { padding:0; margin:0:} 
ul { list-style:none: } 
img { border:0px:} 
a { color:#05a; text-decoration:none:} 
a:hover í color:#f00:} 
#layout ul li { 
text-align: center: 
float: left: 
width: 72px: 
margin-top: 20px: 
margin-left: 20px: 
J 
#layout ul li a img í 
padding: 1px; 
margin-bottom: 3px: 
border: 1px solid #999999; 
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} 
#layout ul li a:hover img í 
padding: 0px; 
border: 2px solid #FFCC00: 
} 
</style> 
</head> 
<body> 
<div id="layout"> 
<ul> 
<li><a href="#"><img sr 
<li><a href="#"><img src=' 


亚 .bmp" width="68" height="54" > 三 亚 </a></li> 
亚 .bmp" width="68" height="54" > 三 亚 </a></li> 
亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img stc=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img stc=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
<li><a href="#"><img src=" 三 亚 .bmp" width="68" height="54" /> 三 亚 </a></li> 
</ul> 


<li><a href="#"><img src=' 
<li><a href="#"><img src=' 


</div> 


</body> 
</html> 


5.2.4 浮动 后 父 容器 高 度 自 适应 


当 一 个 容器 内 的 元 素 都 浮动 后 ， 它 的 高 度 将 不 会 随 着 内 部 元 素 高 度 的 增加 而 增 
加 ， 所 以 造成 内 容 元 素 的 显示 超出 了 容器 。 为 了 便于 查看 效果 ， 把 刚才 实例 中 的 
#layout 增加 一 个 边框 和 内 边 距 ， 代 码 如 下 所 示 ， 效 果 如 图 5-22 所 示 。 


#layout í width:400px: border:2px solid #ccc: padding:2px:} 
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5-22 ”浮动 后 文 元 素 高 度 自 适应 效果 图 


Rm = 


请 观察 图 5-22 箭头 标示 处 ， 该 容器 没有 被 内 容 元 素 撑 高 ， 要 解决 这 个 问题 ， 需 


要 使 用 一 下 样式 : 
overflow:auto: zoom:1 


overflow:auto: 是 让 高 度 自 适 应 ，zoom:1: 是 为 了 兼容 IE 6 而 写 。 
【小 结 】 


e 通过 CSS 布局 对 一 列 宽 度 进行 调 整 
° HTML 列表 的 高 级 运用 : 用 图 片 定 义 项 目 符号 、 横 向 图 文 列表 


[ 自 测 题 】 


1. 要 想 使 DIV 一 列 固定 宽度 并 居中 ， 应 该 设置 CSS 的 哪个 属性 ? ( 
A. border:center; B. width:center; 


C. margin:auto; D. 以 上 都 不 对 


) 
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2. 无 序列 表 和 有 序列 表 的 标签 名 分 别 是 ( AA). 


A.ul B. li 
C. ol D. nl 

3.( ”) 属 性 设置 只 影响 所 添加 图 像 的 显示 ,而 原始 图 像 的 大 小 实际 上 不 会 改变 。 
A. “ 宽 ” 和 “高 ” B. 垂直 边 距 、 水 平 边 距 
C. 源 文件 D. 链接 

4. 要 想 使 列表 横向 排列 ， 应 该 在 CSS 里 添加 下 列 哪个 属性 ? (  ) 
A. margin B. float 
C. display D. overflow 


5. 要 想 使 列表 高 度 自 适应 ， 应 该 在 CSS 里 添加 下 列 哪个 属性 ? ( ) 
A. margin B. float 


C. display D. overflow 


【 上 机 部 分 】 


上 机 目标 


° 掌握 基本 CSS 布局 方法 
° 使 用 列表 实现 特殊 效果 


上 机 练习 
+ 第 一 阶段 多 


练习 1: 使 用 Dreamweaver 对 页 面 布局 
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【问题 描述 】 
有 3 个 DIV, 分 别 对 其 使 用 一 列 固定 宽度 ,一列 自 适 应 宽度 和 一 列 固定 宽度 居中 ， 
效果 如 图 5-23 所 示 。 


PRERE - Vindows Internet Explorer jol x] 
GO [en ARAN hl z| e x [PEE ag 


XED MED FEV KERO IAV HHV 


5-23 ”一 列 宽度 设置 效果 图 


【问题 分 析 】 
这 类 布局 的 好 处 是 当 改变 浏览 器 大 小 时 ， 可 以 按照 设置 要 求 灵活 地 改变 相应 内 
容 的 位 置 ， 看 起 来 更 美观 。 使 用 Dreamweaver 实现 。 


【参考 步骤 】 
参照 课本 。 
参考 代码 : 


<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
<title> 一 列 固定 宽度 </title> 

<style type="text/css"> 

<!-- 
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< HTML 网 页 设计 


#layout í 
border: 2px solid #A9C9E2: 
background-color: #E8F5FE; 
height: 100px; 
width: 200px; 
} 
#layout2 í 
border: 2px solid #A9C9E2: 
background-color: #E8F5FE: 
height: 100px; 
width: 50%; 
margin:20px; 
j 
#layout3 í 
border: 2px solid #A9C9E2; 
background-color: #E8F5FE; 
height: 100px; 
width: 200px; 
margin:20px auto; 
) 
== 
</style> 
</head> 
<body> 
<div id="layout" style="background:url(../img/eg_cute.gif)"><span style="color:#CC0000"> 一 列 
定 宽度 </span></div> 
<div id="layout2" style="background:url(../img/eg_cute.gif)”><img src="../img/eg_cute.gif" 
/><span style="color:#CC0000"> 一 列 自 适应 宽度 </span></div> 
<div id="layout3" style="background:url(../img/eg_cute.gif)"><img src="../img/eg_cute.gif" 
/><span style="color:#CC0000"> 一 列 固定 宽度 居中 </span></div> 
</body> 
</html> 


+ 第 二 阶段 e 


练习 2: 使 用 Dreamweaver 制作 列表 


【问题 描述 】 
实现 如 图 5-24 所 示 的 图 文 列表 。 
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图 5-24 横向 图 文 列表 


【问题 分 析 】 
这 个 图 片 列表 宽 500 像素 ， 其 中 有 3 张 图 片 ， 并 且 每 张 图 片 下 方 都 带 有 文字 链 
。 此 图 片 列表 的 HTML 代码 如 下 : 


<div id="imglist"> 

<ul> 

<li><a href="#" target="_blank"><img src="../img/eg_cute.gif" border="0" /><span> 文 字 标题 
</span></a></li> 

<li><a href="#" target="_blank"><img src="../img/eg_cute.gif" border="0" /><span> 文 字 标题 
</span></a></li> 

<li><a href="#" target="_blank"><img src="../img/eg_cute.gif" border="0" /><span> 文 字 标 题 
</span></a></li> 

</ul> 

</div> 


将 此 段 HTML 代码 复制 到 Dreamweaver 中 的 网 页 源 代 码 中 预览 ， 此刻， 页 面 必 


然 是 错乱 的 ， 下 面 我 们 再 一 步 一 步 将 CSS 完善 。 


(D 全 局 定义 


body.td.th í 
font-size: 14px: 
J 

ull í 
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< HTML 网 页 设计 


padding:0; 
margin:0; 
list-style:none; 
ii 

a:hover { 
color:#CCFF00: 
) 


(2) 定义 容器 宽度 和 列表 宽度 


#imglist { 
width:788px; 
border:1px solid #b5b5b5; 
margin:0 auto; 
clear:both; 
height:176px; 
padding:22px 0 0 0; 
j 
#imglist li í 

float:left; 
text-align:center; 
line-height:30px: 
margin:0 0 0 27px: 
width:125px: 
white-space:nowrap: 
overflow:hidden; 
display:inline; 

J 
#imglist li span í 
display:block: 

) 


(3) 添加 对 图 片 限 制 的 Css 
#imglist li img í 

width:123px: 

height:123px; 

border:1px solid #b5b5b5; 


} 


经 过 上 述 步 骤 ， 这 个 列表 应 该 算是 一 个 比较 严谨 的 图 片 列表 布局 了 。 
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第 5 章 CSS 布局 和 HTML 列表 


【 课 后 作业 ] 


模仿 百度 图 片 搜索 功能 显示 图 片 列 表 ， 效 果 如 图 5-25 所 示 。 
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5-25 ”显示 图 片 列表 
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第 6 章 
超 链 接 伪 类 、 表 单 设计 和 
SMP 


| = 
© 课程 目标 
> 掌握 如 何 使 用 超 链接 伪 类 
> 掌握 如 何 使 用 CSS 进行 表单 设计 
> 掌握 如 何 使 用 CSS 美化 导航 菜单 


° b- ə 
HTML 网 页 设计 


< 


àa Ë # 
1 

本 章 主要 学 习 CSS 的 一 些 高 级 运用 。 超 链接 伪 类 用 于 向 某 些 选择 器 添加 特殊 的 
AR, AIh, Wit CSS 对 表单 以 及 导航 菜单 进行 优化 ， 使 页 面 更 加 美观 。 


6.1 超 链接 伪 类 


64.4 超 链接 的 4 种 样式 


超 链 接 可 以 说 是 网 页 发 展 史 上 的 一 个 伟大 发 明 ， 它 使 得 许多 页 面相 互 链接 ， 从 
而 构成 一 个 网 站 。 说 到 超 链接 ， 它 涉及 到 一 个 新 的 概念 一 一 伪 类 ， 我 们 先 看 下 超 链 
接 的 4 种 样式 : 

a:link (color: #FF0000} /* 未 访问 的 链接 */ 

a:visited (color: #00FF00} /* 已 访问 的 链接 */ 

a:hover (color: #FF00FF) /* 鼠标 移动 到 链接 上 */ 

a:active (color: #0000FF} /* 选 定 的 链接 */ 

以 上 分 别 定义 了 超 链接 未 访问 时 的 链接 样式 、 已 访问 的 链接 样式 、 鼠 标 移 上 时 
的 链接 样式 和 选 定 的 链接 样式 。 之 所 以 称 之 为 伪 类 ， 是 因为 它 不 是 一 个 真实 的 类 ， 
正常 的 类 是 以 点 开始 ， 后 边 跟 一 个 名 称 ， 而 它 是 以 a 开始 ， 后 边 跟 个 冒号 ， 再 跟 个 
状态 限定 字符 ， 例 如 ， 第 3 个 ahover 的 样式 ， 只 有 当 鼠 标 移动 到 该 链接 上 时 它 才 生 
效 ， 而 a:visited 只 对 已 访问 过 的 链接 生效 。 伪 类 使 得 用 户 体验 大 大 提高 ， 例 如 ， 我 
们 可 以 设置 鼠标 移 上 时 改变 颜色 或 下 划 线 等 属性 来 告知 用 户 这 是 可 以 点 击 的 ， 设 置 
已 访问 过 的 链接 的 颜色 变 灰 暗 或 加 删除 线 告知 用 户 这 个 链接 的 内 容 已 访问 过 了 。 

下 面 来 做 一 个 默认 状态 下 是 蓝 色 、 鼠 标 放 上 去 时 是 红色 加 下 划 线 、 选 定 ( 按 下 ) 
时 为 紫色 、 已 访问 过 为 灰色 加 删除 线 的 实例 来 讲解 一 下 。 首 先 插入 两 个 带 超 链接 的 
内 容 ， 代 码 如 下 ， 效 果 如 图 6-1 所 示 。 


第 6 章 ， 超 链接 伪 类 、 表 单 设计 和 导航 菜单 (e> 


<p><a href="#"> 这 里 是 链接 </a></p> 

<p><a href="10.html"> 这 里 也 是 链接 </a></p> 
ee 

<p>《a href="#"> 这 里 是 链接 </a></p> 


10 <p><a href="10.htnl1”> 这 里 也 是 榜 接 人 ak/p> 
Il /body> 


6-1 超 连 接 


从 创建 的 图 中 可 以 看 出 ， 插 入 的 超 链 接 默 认 是 蓝 色 带 下 划 线 的 ， 这 是 标签 的 默 
认 样 式 所 致 ， 接 下 来 ， 我 们 在 ess 样式 中 定义 ， 设 置 过 程 如 图 6-2 和 图 6-3 所 示 。 
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6-3 ”设置 类 型 属性 


设置 完 a:link 的 样式 后 ， 下 面 分 别 设置 a:visited、a:hover 和 a:active 的 样式 。 
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HTML 网 页 设计 


生成 的 源 代码 如 下 : 


<html xmlns="http://www.w3.ore/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 

a:link { color: #06F; text-decoration: none: } 

a:visited í color: #999; text-decoration: line-through; } 
a:hover { color: #F00; text-decoration: underline; } 
a:active { color: #F0F: } 

</style> 

</head> 

<body> 

<p><a hre 伍 "#"> 这 里 是 链接 </a></p> 

<p><a href="10.html"> 这 里 也 是 链接 </a></p> 


</body> 
</html> 
入 /入神 : 
4 种 状态 的 顺序 一 定 不 能 颠倒 ， 否 则 有 些 不 会 生效 。 
' 


64.2 ”将 链接 转换 为 块 级 元 素 


链接 在 默认 状态 下 是 内 联 元 素 ， 转 换 为 块 级 元 素 后 可 以 获得 更 大 的 点 击 区 域 。 


可 以 设置 宽度 和 高 度 ， 将 链接 转换 为 块 状 ， 只 需 增加 一 个 display:block 的 css 属性 
即 可 ， 设 置 过 程 如 图 6-4 一 图 6-8 所 示 。 
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图 6-4 新 建 a 标签 样式 
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规则 定义 


5 规则 定义 


图 6-7 设置 类 型 属性 
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Ce HTML 网 页 设计 = 


6-8 设置 背景 属性 


a { display: block; height: 30px; width: 100px; line-height: 30px: text-align: center; background: 
#CCC; } 


这 样 设置 的 结果 是 全 局 a 都 执行 这 个 样式 显示 。 


下 面 设置 一 下 鼠标 划 过 时 的 状态 ， 其 他 几 种 状态 的 设置 方法 相同 ， 如 图 6.9~ 图 6-11 


图 6-10 设置 类 型 属性 
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a:hover 的 CSS 规则 定义 


分 类 背景 
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6-11 设置 背景 属性 


参考 代码 : 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 

a { display: block; height: 30px: width: 100px; line-height: 30px: text-align: center; background: 
#CCC; ) 

a:hover í color: #FFF; text-decoration: none; background: #333; } 
</style> 

</head> 

<body> 

<p><a hre 人 ="#"> 这 里 是 链接 </a></p> 

<p><a href="10.html"> 这 里 也 是 链接 </a></p> 

</body> 

</html> 


6.1.3 用 CSS 制作 按钮 


学 会 了 把 超 链接 转换 为 块 级 元 素 ， 想 制作 一 个 css 按钮 简直 太 简 单 了 ， 只 需 在 
上 一 步 的 基础 上 增加 一 个 按钮 的 背景 图 片 即 可 实现 。 下 面 以 制作 淘宝 网 首页 的 免费 
注册 按钮 为 例 来 讲解 设置 最 常用 的 默认 样式 和 鼠标 划 过 时 的 样式 。 

首先 需要 准备 默认 状态 和 鼠标 划 过 状态 的 图 片 ， 如 图 6-12 所 示 。 
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ce HTML 网 页 设计 
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图 6-12 默认 状态 和 鼠标 滑 过 状态 图 片 


修改 之 前 的 HTML 如 下 ， 然 后 重新 定义 CSS 样式 ， 如 图 6-13 所 示 。 


<p><a href="#"> 免 费 注册 </a></p> 


a 的 CSS 规则 定义 


图 6-13 设置 类 型 属性 


设置 图 片 背 景 ， 如 图 6-14 所 示 。 


6-14 ”设置 背景 属性 


设置 区 块 颜色 ， 如 图 6-15 所 示 。 
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a fÀ css 规则 定义 x| 


6-15 设置 区 块 属性 


生成 的 html 代码 如 下 : 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<style type="text/css"> 

a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: 
url(/upload/2010-08/14/014304_btn_bg.gif) no-repeat Opx 0px: color: #484700; font-size: 14px; 
font-weight: bold: text-decoration: none: padding-top: 3px; } 

a:hover í background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat Opx Opx:} 
</style> 

</head> 

<body> 

<p><a href="#"> 免 费 注册 </a></p> 

</body> 

</html> 
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首 字 下 沉 是 css 伪 类 上 的 又 一 个 运用 , 它 可 以 直接 通过 css 样式 表 向 某 个 选择 器 
中 的 文本 首 字 母 添 加 特殊 的 样式 , 而 不 需要 给 首 字 添 加 一 个 标签 或 通过 程序 来 实现 。 
现在 以 制作 word 里 的 首 字 下 沉 为 例 来 讲解 ， 应 用 如 下 伪 元 素 : 


:first-letter 
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m°) HTML 网 页 设计 


在 页 面 中 添加 如 下 一 段 内 容 ， 只 用 设置 样式 就 可 以 实现 首 字 下 沉 了 : 


<p>SVSE8.0 HTML 网 页 设计 </p> 
为 了 便于 观察 效果 ， 我 们 设置 p 的 样式 如 下 : 


p { width: 400px: line-height: 1.5: font-size: 14px; } 
然后 设置 p:first-letter 的 样式 ， 如 图 6-16 一 图 6-18 所 示 。 


ddd 
uk 


6-18 设置 方 框 属性 
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生成 的 HTML 代码 如 下 : 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 

p { width: 400px; line-height: 1.5: font-size: 14px; } 

p:first-letter { font-family: "microsoft yahei"; font-size: 40px; float: left; padding-right: 10px; 
line-height: 1; } 

</style> 

</head> 

<body> 

<p> HTML 网 页 设计 </p> 

</body> 
</html> 


6.2 CSS 表单 设计 


6.2.1 改变 文本 框 和 文本 域 样式 


先 说 一 下 文本 框 ， 文 本 框 和 文本 域 都 是 可 以 用 css 进行 美化 的 。 比 如 改变 边框 粗 
细 、 颜 色 、 添 加 背景 色 和 背景 图 像 等 。 请 看 下 面 的 实例 ， 如 图 6-19 所 示 。 
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图 6-19 改变 文本 框 和 文本 样式 
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3 HTML 网 页 设计 


-textl í border:1px solid #f60; color:#03C;} 

-text2 { border:2px solid #390; width:200px: height:28px; font-size: 16px: font-weight:bold: 

line-height:1.6;} 

.text3 { border:2px solid #C3C; height:30px; background:#ffeeff url(lock.gif) right 3px 

no-repeat; } 

-text4 { border:2px solid #F60; width:150px; height:80px:font-size:16px: line-height:1.6: 

background:url(xiaobing.gif) right no-repeat:) 

这 4 个 样式 表 分 别 对 应 第 2、3、4、5 行 表单 ， 第 1 行 是 文本 框 的 默认 样式 ;第 
2 行为 设置 边框 和 字体 颜色 的 样式 ， 第 3 行为 设置 边框 、 宽 度 、 高 度 、 字 体 大 小 和 行 
高 的 样式 ; 第 4 行为 设置 边框 、 增 加 背景 色 和 背景 图 片 ， 第 5 行为 增加 一 个 gif 动画 
的 背景 图 片 ， 看 起 来 是 不 是 生动 了 许多 ? 具体 步骤 不 再 歼 述 。 

下 面 我 们 看 一 下 文本 域 的 样式 设置 : 

„area í border:1px solid #F90; overflow:auto: background:#fff url(net_bg.gif) right bottom 

no-repeat; width:99%; height:100px:} 
图 6-19 中 第 1 个 为 默认 的 文本 域 样式 ， 下 边 为 设置 边框 、 宽 度 百 分 比 、 高 度 和 
背景 图 片 后 的 样式 。overflow:auto 定义 当 内 容 不 超过 现在 文本 域 高 度 时 不 出 现 滚动 
条 。 下 面 运行 一 下 代码 ， 看 看 两 者 的 效果 吧 。 


<html xmlns="http://www.w3.ore/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 

<style type="text/css"> 

-text1 í border:1px solid #f60; color:#03C:} 

-text2 { border:2px solid #390; width:200px: height:28px; font-size: 16px: font-weight:bold: 
line-height:1.6:} 

.text3 { border:2px solid #C3C: height:30px: background:#ffeeff url(lock.gif) right 3px 
no-repeat: } 

.text4 { border:2px solid #F60: width:150px: height:80px:font-size:16px: line-height:1.6: 
backeround:url(xiaobing.gif) right no-repeat:} 

„area í border:1px solid #F90: overflow:auto: background:#fff url(net_bg.gif) right bottom 
no-repeat; width:9996: height:100px:} 

</style> 

</head><body> 

<p> 

<input type="text" name="textfield" id="textfield" > 这 是 默认 样式 
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</p> 

<p> 

<input name="textfield2" type="text" class="text1" id="textfield2" value=" 我 是 蓝 色 的 " /> 
这 是 改变 边框 的 样式 和 文字 颜色 

</p> 

<p> 

<input name="textfield3" type="text" class="text2" id="textfield3" value=" 看 我 大 吧 " /> 
这 是 改变 边框 并 设置 高 宽 和 字体 大 小 的 样式 

</p> 

<p> 

<input class="text3" type="text" name="textfield4" id="textfield4" /> 

这 是 增加 背景 图 片 实例 ， 也 可 放 左 侧 

</p> 

<p> 

<input class="text4" type="text" name="textfield5" id="textfield5" /> 

这 是 增加 了 一 个 背景 图 片 为 gif 动 画 

</p> 

<p> 

<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea> 

</p> 

<p> 

<textarea class="area" name="textarea2" id="textarea2" cols="45" rows="5"></textarea> 
</p> 

</body> 

</html> 


622 用 图 片 美化 按钮 


按钮 也 是 网 页 中 常见 的 元 素 ， 但 默认 的 样式 有 时 候 和 页 面 整体 效果 不 协调 ， 需 


要 把 它 美化 一 下 ， 按 钮 的 样式 设置 和 文本 框 如 出 一 边 ， 没 有 什么 特别 之 处 。 下 面 以 
3 个 实例 来 说 明 一 下 ， 代 码 如 下 ， 效 果 如 图 6-20 所 示 。 


-btn02 { background:#fff url(btn bg2.gif) 0 0: height:22px: width:55px: color:#297405; 
border:1px solid #90be4a: font-size: 12px: font-weight:bold: line-height: 180%: cursor:pointer:} 
-btn04 í background:url(btn_bg2.gif) 0 -24px: width:70px: height:22px: color:#9a4501: 
border:1px solid #dbb119: font-size:12px: line-height:160%: cursor:pointer:} 

-btn07 { background:url(submit bg.gif) Opx -8px: border:1px solid #cfab25; height:32px; 
font-weight:bold; padding-top:2px: cursor:pointer; font-size: 14px: color:#660000:} 

-btn08 í background:url(submit bg.gi Opx -64px: border:1px solid #8b9c56; height:32px: 
font-weight:bold; padding-top:2px: cursor:pointer; font-size: 14px: color:#360:} 
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-btn09 { background:url(http://www.aa25.cn/upload/2010-08/14/014304_btn_bg.gif) 0 0 
no-repeat; width:107px: height:37px; border:none; font-size: 14px: font-weight:bold: 
color:#d84700: cursor:pointer:} 
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图 6-20 图 片 美化 按钮 


图 6-20 中 的 按钮 ， 前 两 个 为 固定 宽度 ,但 宽度 可 以 根据 需要 随意 调整 ， 中 间 两 
个 为 自 适应 宽度 ， 根 据 字数 多 少 来 适应 。 这 4 个 样式 都 是 采用 一 个 背景 图 片 横向 循 
环 实现 ， 所 以 宽度 不 受 限制 , 最 后 一 个 完全 采用 背景 图 片 ,这 样 宽度 就 得 固定 不 变 ， 
否则 会 影响 美观 。 需 要 注意 的 是 这 种 方式 需要 去 掉 按钮 边框 。 

采用 以 上 按钮 有 一 个 好 处 ， 即 当 css 样式 表 没 有 加 载 上 时 ， 将 会 显示 为 默认 按 
钮 样式 ， 这 样 用 户 可 以 清楚 地 知道 这 是 个 按钮 ， 正 常 加 载 后 ， 会 使 按钮 更 加 美观 。 图 
片 美化 按钮 和 我 们 前 面 所 讲 的 css 按钮 有 所 不 同 ， 前 面 所 讲 的 按钮 实际 还 是 个 链接 ， 
而 这 里 的 是 按钮 元 素 。( 注 : 不 同 浏览 器 下 显示 效果 略 有 不 同 。) 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<style type="text/css"> 

.btn02 { background:#fff url(btn_bg2.gif) 0 0: height:22px; width:55px: color:#297405: 
border:1px solid #90be4a: font-size:12px; font-weight:bold: line-height:180%; cursor:pointer:} 
-btn04 { background:url(btn_bg2.gif) 0 -24px: width:70px: height:22px; color:#9a4501; 
border:1px solid #dbb119: font-size:12px: line-height:160%: cursor:pointer:} 

.btn07 { background:url(submit_bg.gif) Opx -8px: border:1px solid #cfab25: height:32px: 
font-weight:bold; padding-top:2px: cursor:pointer: font-size:14px: color:#660000:} 

.btn08 í background:url(submit bg.gif) Opx -64px: border:1px solid #8b9c56: height:32px: 
font-weight:bold: padding-top:2px: cursor:pointer: font-size:14px: color:#360;} 

.btn09 í background:url(btn.gif) 0 0 no-repeat: width:107px: height:37px: border:none: 
font-size:14px; font-weight:bold: color:#d84700: cursor:pointer:} 
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</style> 

</head> 

<body> 

p> 

<input name="button" type="submit" class="btn02" id="button" value=" 提 交 " /> 
</p> 

<p> 

<input name="button2" type="submit" class="btn04" id="button2" value=" 提 交 " /> 
</p> 

<p> 

<input name="button" type="submit" class="btn07" id="button" value=" 提 交 " /> 
</p> 

ED 

<input name="button2" type="submit" class="btn08" id="button2" value=" 看 看 我 的 宽度 有 多 宽 " /> 
</p> 

<p> 

<input name="button" type="submit" class="btn09" id="button" value=" 免 费 注册 " /> 
</p> 

</body> 

</html> 


623 ”改变 下 拉 列 表 样 式 


IE 6 对 下 拉 列 表 的 背景 和 宽度 样式 生效 ， 其 他 绝 大 部 分 不 生效 ，IE 8 则 增加 了 对 
边框 和 高 度 的 支持 。 但 这 似乎 离 我 们 的 要 求 还 很 远 ， 所 以 不 得 不 寻求 其 他 的 办 法 。 先 
来 看 下 面 3 个 图 (图 6-21 一 图 6-23)， 同 一 代码 分 别 在 IE 6、FireFox、IE 8 浏览 器 下 显 
示 的 差异 吧 。 
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图 6-21 IE 6 中 下 拉 列 表 样 式 效 果 
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图 6-23 IE8 中 下 拉 列 表 样 式 效果 
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<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
<style type="text/css"> 

„select í border:1px solid #f60: background:#FF9: height:30px:} 

„tip { width:50px: border:1px solid #ccc: background:#fff. position:absolute: top:5px: left:70px: 
font-size: 12px: height:100px: padding:Spx:} 

</style> 

</head> 

<body> 

<p> 请 选择 项 目 </p> 

= = 

<select name="select" id="select" class="select"> 

<option> 请 选择 --------</option> 
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<option> 标 准 之 路 </option> 

</select> 

</p> 

<div class="tip"> 看 看 谁 能 把 我 挡 着 </div> 

</body> 

</html> 

3 个 浏览 器 下 的 显示 都 不 尽 相 同 ， 所 以 最 好 是 寻求 其 他 的 办 法 或 者 使 用 默认 样 
式 。 其 中 ， 正 6 浏览 器 下 被 遮挡 ， 可 以 把 浮动 层 设 为 这 ame， 因 为 下 拉 列 表 不 会 跑 到 
iframe 上 边 。 有 更 高 美化 需求 的 可 以 用 div 模拟 来 代替 下 拉 列 表 ， 但 这 种 方法 实现 


起 来 比较 麻烦 ， 由 于 时 间 关 系 ， 本 节 不 做 过 多 介绍 。 


6.2.4 用 label 标签 提升 用 户 体验 


label 标签 常常 被 大 家 忽略 ， 合 理 利用 会 使 页 面 的 用 户 体验 得 到 提升 。 我 们 可 以 
对 表单 的 说 明文 字 使 用 label 标签 , 这 样 当 用 户 单 击 文字 时 , 光标 就 会 定位 到 表单 上 。 
如 图 6-24 所 示 ， 当 单 击 “ 姓 名 ”文字 时 ， 光 标 就 会 定位 到 后 边 的 文本 框 ; 单 击 
“ 男 ”“ 女 ”文字 也 会 选中 相应 的 选项 ， 同 理 ， 复 选 框 和 文本 域 也 是 如 此 。 
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图 6-24 label 标签 定位 光标 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://wwww.w3.ore/1999/xhtml"> 
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<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<style type="text/css"> 

</style> 

</head> 

<body> 

<p> 

<label for="name"> 姓 名 : </label> 

<input type="text" name="name" id="name" /> 

</p> 

<p> 性 别 : 

<input type="radio" name="sex" id="male" value="radio" /><label for="male"> 男 </label> 
<input type="radio" name="sex" id="female" value="radio2" /><label for="female"> 女 
</label></p> 

<p> 爱 好 : 

<input type="checkbox" name="music" id="music" /><label for="music"> 听 音乐 </label> 
<input type="checkbox" name="web" id="web" /><label for="web"> 上 网 </label> 
<input type="checkbox" name="book" id="book" /><label for="book"> 看 书 </label></p> 
<p> 

<label for="content"> 简 历 : </label> 

<textarea name="content" id="content" cols="45" rows="5"></textarea> 


</p> 
<p>&nbsp;</p> 
<p>&nbsp; </p> 
</body> 
</html> 


6.3 ”导航 菜单 


6.3.1 横向 列表 菜单 


第 5 章 学 过 横向 列表 ， 又 学 习 了 float 属性 ,那么 要 实现 横向 列表 菜单 就 很 简单 
只 需 把 二 横向 排列 即 可 。 代 码 如 下 ， 效 果 如 图 6-25 所 示 。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
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<head> 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
<style type="text/css"> 

body { font-family: Verdana: font-size: 12px; line-height: 1.5: y 

a { color: #000; text-decoration: none; } 

a:hover í color: #F00: } 

#menu { border: 1px solid #CCC; height:26px; background: #eee;} 
#menu ul { list-style: none; margin: 0px; padding: Opx: } 

#menu ul li { float:left; padding: Opx 8px; height: 26px; line-height: 26px; } 
</style> 

</head> 

<body> 

<div id="menu"> 

<ul> 

<li><a href="#"> $ J </a></li> 

<li><a hre 伍 "#"> 网 页 版 式 布局 </a></li> 

<li><a href="#">div+css 教程 </a></li> 

<li><a href="#">div+css 实例 </a></li> 

<li><a hre 伍 "#"> 常 用 代码 </a></li> 

</ul> 

</div> 

</body> 

</html> 
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首页 “网 页 版 式 布局 。 div+css 教 程 。div+css 实 例 常用 代码 
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横向 列表 菜单 最 主要 就 是 用 float 让 1i 向 右 浮动 后 , 实现 横向 排列 , 具体 步 又 不 
再 歼 述 。 以 前 有 人 提问 怎么 让 它 水 平 居中 ， 其 实 很 简单 ， 首 先 使 导航 的 宽度 固定 ， 
然后 设置 margin:0 auto: 即 可 实现 ， 如 图 6-26 所 示 。 
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图 6-26 设置 方 框 属性 


为 了 用 户 体验 更 加 友好 ， 可 以 把 a 转换 成 块 级 元 素 ， 也 可 以 给 a 设置 背景 色 或 
背景 图 片 使 它 更 加 美观 ， 然 后 ， 再 设置 鼠标 放 上 时 的 样式 。 


#menu { width:370px: margin:0 auto; border: 1px solid #CCC: height:26px; background: #eee;} 
#menu ul { list-style: none; margin: 0px: padding: 0px: } 

#menu ul li { float:left;} 

#menu ul li a í display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left; } 
#menu ul li a:hover { background:#333; color:#fff. } 


经 过 修改 ， 现 在 的 用 户 体验 是 不 是 更 加 友好 了 了 呢 ? 如 图 6-27 所 示 。 
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图 6-27 横向 列表 菜单 水 平 居中 效果 图 


这 里 的 #nenu ul li a 本 来 是 可 以 不 加 float:left 的 , 但 IE 6 中 在 1 没有 设置 宽度 、 
#menu ul li a 设置 了 display:block 的 情况 下 ， 将 会 显示 错乱 ， 所 以 需要 在 a 上 增加 
float:left 来 修正 。 
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至 此 , 常用 的 样式 大 部 分 都 涉及 到 了 , 为 了 提高 效率 ,建议 大 家 还 是 手写 代码 ， 
如 果 你 还 不 能 手写 代码 ， 就 参考 前 面 的 样式 ， 自 己 在 css 编辑 器 里 设置 吧 。 


6.3.2 用 图 片 美化 的 横向 导航 


背景 图 片 也 是 网 页 制作 当中 最 常用 的 样式 之 一 。 运 用 好 背景 图 片 ， 可 以 使 用 户 
的 页 面 更 加 出 色 、 更 加 人 性 化 ， 而 且 还 会 拥有 更 快 的 加 载 速度 ， 显 示 效 果 如 下 。 


网 页 版 式 。 web 教程 。 web 实例 常用 代码 


其 中 , 用 到 3 张 图 片 ,分 别 为 当前 状态 、 鼠标 放 上 时 的 样式 和 默认 样式 用 的 图 片 。 
àd | 


下 面 修改 css 样式 ， 设 置 方 法 相同 ， 如 图 6-28 所 示 。 


aenu ul li a 的 CSS 规则 定义 
分 类 省 最 
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图 6-28 设置 背景 图 片 


#menu { width:500px: height:28px: margin:0 auto; border-bottom:3px solid #E10001:) 

#menu ul { list-style: none; margin: Opx: padding: 0px: } 

#menu ul li { float:left; margin-left:2px:} 

#menu ul li a { display:block; width:87px: height:28px: line-height:28px: text-align:center; 
background:url(btn_silver.gif) 0 0 no-repeat: font-size: 14px:) 

#menu ul li a:hover í background:url(btn pink.gif) 0 0 no-repeat:} 

#menu ul li a#current í background:url(btn_red.gif) 0 0 no-repeat; font-weight:bold: color:#fff; } 


为 了 让 用 户 知道 当前 所 处 的 页 面 ， 再 做 一 个 当前 页 面 的 状态 ， 把 ID 添加 到 相应 
Hiat. 


173° 


HTML 网 页 设计 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.oreg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<style type="text/css"> 

body { font-family: Verdana; font-size: 12px; line-height: 1.5; } 

a { color: #000; text-decoration: none; } 

a:hover í color: #F00: } 

#menu { width:500px: height:28px; margin:0 auto; border-bottom:3px solid #E10001:) 
#menu ul { list-style: none; margin: 0px; padding: 0px; } 

#menu ul li { float:left; margin-left:2px:} 

#menu ul li a í display:block; width:87px; height:28px: line-height:28px: text-align:center; 
background:url(btn_silver.gif) 0 0 no-repeat; font-size:14px;} 

#menu ul li a:hover í background:url(btn_pink.gif) 0 0 no-repeat; } 

#menu ul li a#current { background:url(btn_red.gif) 0 0 no-repeat: font-weight:bold: color:#fff} 
</style> 

</head> 

<body> 

<div id="menu"> 

<ul> 

<li><a id="current" href="#">} J </a></li> 

<li><a hre 伍 "#"> 网 页 版 式 </a></li> 

<li><a href="#">web 教程 </a></li> 

<li><a href="#">web 实例 </a></li> 

<li><a hre 伍 "#"> 常 用 代码 </a></li> 

</ul> 

</div> 

</body> 

</html> 


6.3.3 CSS Sprites 技术 


在 国内 ， 很 多 人 将 CSS Sprites 称 为 CSS 精灵 或 CSS 雪碧 。 它 把 网 页 中 的 一 些 背 


景 图 片 整 合 到 一 张 图 片 文件 中 ， 再 利用 CSS 的 背景 图 片 定位 到 要 显示 的 位 置 。 这 样 
做 可 以 减少 文件 体积 ， 减 少 对 服务 器 的 请 求 次 数 ， 提 高 效率 。 
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介绍 CSS Sprites 之 前 ， 先 把 背景 图 片 给 搞 清楚 。 


#menu ul li a í background:#ccc url(btn silver.gif) 0 0 no-repeat: } 
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CSS 背景 属性 缩写 后 如 上 所 示 ，#ecc 表示 背景 色 ， url0 里 是 背景 图 片 路 径 ; JE F 
来 的 两 个 数值 参数 分 别 是 左右 和 上 下 ， 第 一 个 参数 表示 距 左边 多 少 px， 第 二 个 参数 
表示 距 上 边 多 少 px， 这 和 padding 的 简写 方式 不 一 样 ， 一 定 不 要 混淆 。 另 外 ， 再 强调 
一 点 : 当 css 中 值 为 0 时 可 以 不 带 单位 ， 其 他 数值 都 必须 带 单位 (line-height 值 为 多 少 
倍 时 ，zoom、z-index 除外 ); no-repeat 表示 背景 图 片 向 哪个 方向 重复 ， 此 时 为 不 重复 。 

还 需 说 明 的 一 点 是 ， 定 位 图 片 位 置 的 参数 是 以 图 片 的 左上 角 为 原点 的 ， 理 解 了 
这 些 ，CSS Sprites 技术 基本 上 就 懂 了 ， 就 是 靠背 景 图 片 定位 来 实现 的 。 把 三 张 背景 
图 片 整合 到 一 张 上 ， 如 图 6-29 所 示 。 
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图 6-29 图 片 整合 效果 图 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<style type="text/css"> 

body { font-family: Verdana: font-size: 12px; line-height: 1.5; } 

a { color: #000; text-decoration: none; } 

a:hover { color: #F00; } 

#menu { width:500px: height:28px; margin:0 auto; border-bottom:3px solid #E10001:) 
#menu ul ( list-style: none; margin: 0px: padding: 0px: } 

#menu ul li { float:left; margin-left:2px:} 

#menu ul li a { display:block; width:87px: height:28px: line-height:28px: text-align:center; 
background:url(btn_ Sprites.gif) 0 -28px no-repeat: font-size:14px;} 

#menu ul li a:hover í background:url(btn Sprites.gif) 0 -56px no-repeat: } 

#menu ul li a#current í background:url(btn_ Sprites.gif) 0 0 no-repeat: font-weight:bold: 
color:#fff} 

</style> 

</head> 

<body> 

<div id="menu"> 

<ul> 

<li><a id="current" href="#"> H </a></li> 
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<li><a hre 伍 "#"> 网 页 版 式 </a></li> 
<li><a href="#">web 教程 </a></li> 
<li><a href="#">web 实例 </a></li> 


<li><a hre 伍 "如 > 常用 代码 </a></li> 
<l> 
</div> 
</body> 
</html> 
设置 好 后 的 效果 如 图 6-30 所 示 。 
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图 6-30 用 CSS Sprites 技术 设置 背景 图 片 效 果 图 


【小 结 】 


o 超 链接 伪 类 的 4 种 样式 : a:link、a:visited、a:hover 和 a:active 
o 通过 CSS 表单 设计 可 以 美化 文本 框 、 按 钮 、 下 拉 列 表 等 
° 用 横向 列表 的 float 浮动 定位 制作 导航 菜单 ， 然 后 通过 CSS 技术 来 美化 


[ 自 测 题 】 


1. 超 链 接 a:hover 表示 ( )。 
A. 未 访问 的 链接 B. 已 访问 的 链接 
C. 鼠标 移动 到 链接 上 D. 选 定 的 链接 
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2. 表单 包括 两 个 部 分 ， 下 列 选项 中 属于 表单 组 成 部 分 的 是 ( )。 
A. 表单 B. 表单 对 象 
C. 表单 域 D. 以 上 都 是 
3. 下 面 能 正确 实现 label 标签 的 光标 定位 作用 的 是 (  )。 
A. <label>XX</label><input type="text" name=" 姓 名 " id="name" /> 
B. <label for="name">XX</label><input type="text" name=" 姓 名 " id="name" /> 
C. <label onblur="name">XX</label><input type="text" name=" 姓 名 " 
id="name" /> 
D. <label for=" 姓 名 ">XX</label><input type="text" name=" 姓 名 " id="name" /> 
4. 要 使 列表 菜单 变 成 横向 的 ， 关 键 是 下 面 哪 句 代码? (。 ) 
A. #menu ul { list-style: none; margin: Opx: padding: Opx; } 
B. #menu ul li { float:left; } 
C. #menu ul li a { display:block; padding: Opx 8px; height: 26px; line-height: 
26px; float:left:) 
D. #menu ul li a:hover í background:#333; color:#fff:) 
5. CSS Sprites RÆ  )o 
A. 把 多 张 图 片 文 件 合并 
B. 把 背景 图 片 变 成 图 片 文 件 
C. 把 多 张 背景 图 片 合并 成 一 张 图 片 文件 
D. 把 多 张 图 片 文 件 合并 成 一 张 背景 图 片 


【上 机 部 分 】 


上 机 目标 
° 掌握 伪 类 的 使 用 
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o 使 用 CSS 表单 设计 美化 页 面 
° 在 网 页 上 使 用 导航 菜单 


上 机 练习 
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练习 1: 超 链接 伪 类 的 使 用 


【问题 描述 】 

擅 类 常见 的 使 用 就 是 对 于 超 链 接 ， 超 链接 最 初 不 带 下 划 线 ， 如 图 6-31 所 示 。 当 
用 户 和 鼠标 指针 移动 到 超 链接 上 时 ， 就 会 显示 红色 的 下 划 线 ， 如 图 6-32 所 示 。 当 用 户 
单 击 时 ， 超 链接 又 变 成 绿色 ， 并 且 变 得 没有 下 划 线 ， 如 图 6-33 所 示 。 


[re >] era we” 
| 我 是 超 链 接 , 移 过 来 后 再 点 击 我 试 试看 


图 6-31 不 带 下 划 线 的 超 链接 


| ET 


6-32 ”鼠标 指针 悬 停 时 显示 下 划 线 
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6-33 ” 单 击 时 不 带 下 划 线 


【问题 分 析 】 
题目 很 简单 ， 只 要 分 清 超 链接 伪 类 的 4 种 样式 就 很 容易 实现 了 。 
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° alink 为 访问 的 链接 

o a:visited 为 已 访问 的 链接 

o a:hover 为 鼠标 移动 到 链接 上 
e aiactive 为 选 定 的 链接 


【参考 步骤 】 


<html> 

<head> 

<title> 无 标题 文档 </title> 

<style type="text/css"> 

af /* 设置 超 链接 不 带 下 划 线 ，text-decoration 表示 对 文本 修饰 */ 
color:blue; 

text-decoration:none; 

} 

ahover{ /* 鼠标 在 超 链接 上 悬 停 时 ， 带 下 划 线 */ 
color:red: 

text-decoration:underline: 

] 

aiactive{f /* 活动 链接 时 ， 颜 色 为 绿色 ， 并 不 带 下 划 线 */ 
color:green: 

text-decoration:none; 

] 

</style> 

</head> 

<body> 

<a href="http://www.163.com"> 我 是 超 链接 ， 移 过 来 后 再 单 击 我 试 试看 </a> 
</body> 

</html> 


练习 2: 用 CSS 设计 导航 菜单 


【问题 描述 】 
通过 CSS 技术 实现 如 图 6-34 所 示 的 效果 ， 素 材 由 教员 提供 。 
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企业 历史 招商 加 里 网 上 下 单 联系 我 们 


eiaei E) 
图 6-34 用 CSS 美化 后 的 导航 菜单 
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【问题 分 析 】 

该 导航 菜单 效果 包括 两 个 部 分 : 上 层 子 菜单 和 下 层 子 菜单 。 

不 用 动态 实现 切换 按钮 效果 ， 但 鼠标 移动 到 菜单 上 的 效果 要 显示 。 
素材 需要 用 到 CSS Sprites 技术 来 实现 背景 图 。 


【参考 步骤 】 
(1) 导航 分 为 一 级 导航 和 二 级 导航 ,所 以 需要 在 nav 下 插入 nav_main 和 nav_son 


两 个 块 元 素 。 


<div id="nav"> 

<div id="nav_1"></div> 

<div id="nav_r"></div> 

<div class="nav_main"> 

<ul> 

<li><a href="#"><span> Ë Bi </span></a></li> 
<li><a href="#" id="nav_current"><span> 企 业 新 闻 </span></a></li> 
<li><a hre 仁 "#"><span> 企 业 简介 </span></a></li> 
<li><a hre 伍 "#"><span> 产 品 展厅 </span></a></li> 
<li><a hre 伍 "#"><span> 企 业 历 史 </span></a></li> 
<li><a hre 伍 "#"><span> 招 商 加 盟 </span></a></li> 
<li><a hre 伍 "#"><span> 网 上 下 单 </span></a></li> 
<li><a hre 伍 "#"><span> 联 系 我 们 </span></a></li> 
</ul> 

</div> 

<div class="nav_son"> 

<ul> 

<li><a hre 伍 "#"> 企 业 动 态 </a></li> 

<li><a hre 仁 "#"> 领 导 活动 </a></li> 

<li><a hre 伍 "#> 产 品 资讯 </a></li> 
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<li><a hre 全 "六 > 通知 公告 </a></li> 
</ul> 
</div> 


</div> 
(2) 设置 好 全 局 样式 。 


body { margin:0 auto; font-size:12px: font-family:Verdana: line-height:1.5;} 
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0: margin:0:} 

ul { list-style:none:} 

a { color:#444; text-decoration:none;} 


(3) 设置 nav 的 高 度 及 背景 图 片 样式 。 
#nav { height:66px; background:url(nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;} 
(4) 设置 主 菜单 和 子 菜单 样式 。 


.nav_main { height:36px; overflow:hidden:} 

.nav_main ul li { float:left; font-size:14px; font-weight:bold: margin:5px 5px 0 Spx:} 
.nav_main ul li a { float:left; display:block; height:26px: line-height:26px; color:#fff; 
padding-left:20px:} 

.nav_main ul li a span { float:left; display:block; padding-right:20px:} 

nav_main ul li a:hover { background:url(nav_bg.gif) 0 -163px no-repeat; color:#fff} 
.nav_main ul li a:hover span í background:url(nav_bg.gif) right -163px no-repeat; 
cursor:pointer:} 

nav_main ul li a#nav_current { height:31px: line-height:31px; background:url(nav_bg.gif) 0 
-132px no-repeat: color:#646464:} 

‘nav_main ul li a#nav_current span í height:31px; background:url(nav_bg.gif) right -132px 
no-repeat: } 

.nav_son { height:30px:} 

.nav_son ul li í float:left; margin-top:4px:} 

nav_son ul li a { display:block; width:78px; height:22px: line-height:22px: text-align:center; 
color:#6e6e6e:} 

.nav_son ul li a:hover í background:url(nav_bg.gif) 0 -198px no-repeat:color:#FF0000:} 


注意 这 里 用 到 了 CSS Sprites 技术 ， 剪 切 图 片 的 坐标 要 精确 。 
(5) 最 后 一 步 就 是 实现 两 端的 圆 角 。 实 现 圆 角 的 方法 也 不 复杂 ， 只 需 再 增加 两 
行 代码 和 两 个 样式 即 可 。 在 nav 下 的 nav_main 之 前 增加 如 下 两 行 代码 : 
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<div id="nav 1"></div> 
<div id="nav_r"></div> 


然后 用 样式 表 定 义 一 个 左 侧 的 圆 角 和 一 个 右 侧 的 圆 角 。css 样式 如 下 : 


#nav_1 { float:left; height:66px: width:5px; overflow:hidden; background:url(nav_bg.gif) 0 -66px 
no-repeat; margin-right: 10px; } 

#nav_r { float:right; height:66px: width:5px; overflow:hidden; background:url(nav_bg.gif) -5px 
-66px no-repeat: } 


至 此 ， 整 个 导航 菜单 效果 就 出 来 了 。 
+ 第 二 阶段 e 


练习 3: 实现 网 站 头 部 设计 


【问题 描述 】 
在 练习 2 的 基础 上 加 入 网 站 头 部 logo， 如 图 6-35 所 示 。 
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6-35 ”网 站 头 部 


【问题 分 析 】 
头 部 logo 分 为 两 部 分 ， 左 边 是 logo 图 标 ， 右 边 是 搜索 功能 。 只 需 实现 显示 效 
果 即 可 ， 用 CSS+DIV 的 浮动 定位 来 实现 。 
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[ 课 后 作业 】 


按照 上 机 练习 步骤 为 某 广告 公司 建立 网 站 ， 取 名 为 “MyCompany”， 并 为 站 点 
“MyCompany” 设 计 首页 (作业 相关 素材 如 下 )， 如 图 6-36 所 示 。 
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图 6-36 ”建立 网 站 素材 
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模板 和 框架 有 利于 保持 整个 网 站 外 观 和 风格 的 一 致 性 。 前 面 我 们 学 习 了 通过 
HTML 语言 来 实现 表单 和 框架 ， 在 Dreamweaver 中 创建 表单 和 框架 更 加 方便 。 


7.1 模板 


通常 在 一 个 网 站 中 会 有 几 十 甚至 几 百 个 风格 基本 相似 的 页 面 ， 如 果 每 次 都 重新 
设 定 网 页 结构 以 及 相同 栏目 下 的 导航 条 和 各 类 图 标 就 显得 非常 麻烦 ， 我 们 可 以 借助 
Dreamweaver 的 模板 功能 来 简化 操作 。 其 实 模板 的 功能 就 是 把 网 页 布局 和 内 容 分 离 
在 布局 设计 好 之 后 将 其 存储 为 模板 ， 这 样 相同 布局 的 页 面 就 可 以 通过 模板 创建 ， 因 
此 能 够 极 大 地 提高 工作 效率 。 

模板 有 利于 维护 网 站 , 例如 , 网 站 中 的 所 有 页 面 上 都 有 相同 的 标志 和 版 权 信息 ， 
假设 现在 要 改动 版 权 信息 ， 如 果 使 用 了 模板 ， 就 不 需要 将 每 个 页 面 打 开 一 一 进行 修 
改 ， 只 需 在 模板 中 进行 修改 ， 应 用 了 模板 的 所 有 页 面 都 将 自动 更 新 。 


7.1.1 模板 基础 知识 


Dreamweaver 模板 包括 两 个 区 域 : 可 编辑 区 域 和 不 可 编辑 区 域 。 

模板 中 的 可 编辑 区 域 允许 用 户 根据 页 面 的 需要 来 修改 和 自 定义 内 容 ， 不 可 编辑 
区 域 是 不 可 修改 和 自 定义 的 区 域 。 若 对 模板 进行 了 修改 ， 则 应 用 了 该 模板 的 所 有 页 
面 的 不 可 编辑 区 域 都 会 随 之 改变 。 所 以 ， 在 创建 模板 时 ， 必 须 注 意 定义 可 编辑 区 域 
和 不 可 编辑 区 域 。 


7.1.2 创建 模板 


可 以 将 现 有 的 HTML 文档 保存 为 模板 ， 也 可 以 从 零 开始 创建 一 个 新 模板 。 不 管 
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使 用 哪 种 方法 创建 模板 ， 都 会 在 站 点 里 自动 生成 一 个 “Templates” 文 件 夹 ， 并 将 该 
模板 自动 保存 在 “Templates” 文 件 夹 下 ， 并 且 模 板 文件 的 扩展 名 为 .dwt。 


1. 将 现 有 的 HTML 文档 保存 为 模板 


(1) 选择 “文件 ”|“ 打 开 ” 命 令 ， 出 现 “ 打 开 ” 对 话 框 。 

(2) 在 “打开 ”对 话 框 中 ， 选 择 要 创建 为 模板 的 现 有 文档 。 

(3) 单 击 “ 确 定 ”按钮 ， 该 文档 将 会 出 现在 “文档 ”窗口 中 。 

(4) 选择 “文件 ”|“ 另 存 为 模板 ”命令 ， 将 出 现 “另存 为 模板 ”对 话 框 ， 在 此 
对 话 框 中 ， 从 “站 点 ”下 拉 列 表 中 选择 要 保存 模板 的 站 点 。 并 在 “另存 为 ” 框 中 输 
入 模板 的 名 称 ， 如 图 7-1 所 示 。 


另存 为 模板 


图 7-1 “另存 为 模板 ”对 话 框 


(5) 单 击 “ 保 存 ” 按 钮 ， 则 该 模板 创建 成 功 (如 图 7-2 所 示 )， 并 且 该 页 面 以 .dwt 
为 扩展 名 保存 在 “Templates ”文件 夹 下 。 
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2. 新 建 空白 模板 


(1) 选择 “窗口 ” |“ 资源 ”命令 ， 此 时 在 右边 会 出 现 “ 资 源 ” 面 板 。 


(2) 单 击 “ 资 源 ” 面 板 上 的 “模板 ”图 标 ， 将 显示 “模板 ”面板 ， 如 图 7-3 所 示 。 


(3) 单 击 “ 模 板 ” 面 板 右 下 角 的 “新 建 模板 ”图 标 暂 。 
(4) 在 “名 称 ” 字 段 中 输入 新 模板 名 称 ， 然 后 按 Enter 键 ， 一 个 空白 的 模板 就 创 
建成 功 了 ,如 图 7-4 所 示 。 该 空白 模板 以 .dwt 为 扩展 名 保存 在 “Templates ”文件 夹 下 。 
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图 7-3 在 “资源 ”面板 上 显示 模板 
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7-4 在 “资源 ”面板 上 创建 的 模板 


(5) 单 击 “ 模 板 ” 面 板 右 下 角 的 “编辑 ”图 标 E， 就 可 以 在 “文档 ”窗口 中 将 
该 空白 模板 打开 (如 图 7-5 所 示 )。 在 此 模板 中 ， 可 以 添加 文本 、 图 像 、 表 格 和 其 他 页 
面 元 素 。 


在 使 用 模板 时 ， 不 能 将 模板 从 “Templates” 文 件 夹 中 移出 ， 也 不 能 将 
非 模 板 文件 放 在 “Templates ”文件 夹 下 ， 并且 不 能 将 “Templates ”文件 夹 
从 站 点 的 本 地 根 文件 夹 中 移出 ， 否 则 将 导致 “Templates” 文 件 夹 的 路 径 


出 错 。 
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图 7-5 编辑 模板 


7.1.3 ”对 网 页 和 网 站 应 用 模板 


在 模板 创建 之 后 , 必须 确保 所 有 相关 的 页 面 都 使 用 该 模板 ,以便 在 更 新 模板 时 ， 
这 些 页 面 会 随 之 自动 更 新 。 下 面 介绍 对 页 面 应 用 模板 的 两 种 方法 。 


1. 直接 从 模板 新 建 页 面 


步骤 如 下 : 

(1) 选择 “文件 ”|“ 新 建 ” 命 令 ， 在 出 现 的 “新 建文 档 ” 对 话 框 中 ， 单 击 “ 模 
板 ” 按 钮 ， 将 切换 到 “模板 ”选项 卡 (如 图 7-6 所 示 )， “模板 ”选项 卡 里 将 会 显示 所 有 
的 站 点 。 

(2) 在 “模板 用 于 ”选项 栏 中 选择 要 应 用 模板 的 站 点 ， 在 “站 点 “我 的 站 点 ”” 
选项 栏 中 选择 要 应 用 于 页 面 的 模板 。 

G) 单 击 “ 创 建 ”按钮 ， 即 可 成 功 通过 选中 的 模板 创建 一 个 页 面 。 选 择 “ 文 件 ”| 
“保存 ”命令 将 其 页 面 保存 ， 并 假设 为 其 命名 为 “product”。 


2. 将 模板 应 用 于 打开 的 页 面 


步骤 如 下 : 

(1) 打开 要 应 用 模板 的 页 面 。 

(2) 选择 “修改 ”|“ 模 板 ”|“ 应 用 模板 到 页 ”命令 ， 将 会 出 现 “ 选 择 模板 ”对 
话 框 ， 如 图 7-7 所 示 。 
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G) 在 “选择 模板 ”对 话 框 中 选择 要 应 用 于 页 面 的 模板 ， 单 击 “ 选 定 ”按钮 即 
可 将 模板 应 用 于 页 面 。 


7-6 “从 模板 新 建 ” 对 话 框 


7-7 “选择 模板 ”对 话 框 


(4) 选择 “文件 ”|“ 保 存 ” 命 令 将 该 页 面 保存 ， 最 终 效果 如 图 7-8 所 示 。 


图 7-8 ”从 模板 新 建 页 面 
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通过 以 上 两 种 方法 将 网 页 应 用 模板 后 ， 会 发 现 这 些 页 面 是 不 可 编辑 的 ， 即 不 能 
在 页 面 中 添加 、 删 除 和 修改 内 容 。 这 是 因为 在 默认 情况 下 ， 从 模板 建立 的 所 有 页 面 
都 处 于 锁定 状态 ， 模 板 的 主要 功能 就 是 保持 所 有 页 面 结构 一 致 。 但 是 网 站 里 的 所 有 
页 面 不 可 能 完全 一 样 ， 只 是 每 个 页 面 大 部 分 相同 ， 那 么 这 个 时 候 就 必须 要 编辑 从 模 
板 建立 的 页 面 。 要 编辑 这 些 页 面 的 某 些 区 域 ， 就 必须 在 模板 里 将 这 些 区 域 指定 为 可 
编辑 区 域 (参照 “模板 基础 知识 小 节 ” 理 解 可 编辑 区 域 和 不 可 编辑 区 域 的 概念 )。 下 
面 将 介绍 对 可 编辑 区 域 的 操作 。 


1. 添加 基本 可 编辑 区 域 


(1) 在 模板 页 面 中 选择 要 设置 为 可 编辑 的 区 域 。 

(2) 选择 “插入 ”|“ 模 板 对 象 ”|“ 可 编辑 区 域 ”命令 ， 将 出 现 “ 新 建 可 编辑 区 
域 ” 对 话 框 ， 如 图 7-9 所 示 。 在 “名 称 ” 框 中 ， 为 该 区 域 输入 一 个 唯一 的 名 称 ， 同 
一 名 称 不 能 使 用 两 次 。 

G) 单 击 “ 确 定 ”按钮 ， 则 该 区 域 将 突出 显示 在 一 个 矩形 内 ， 该 区 域 的 名 称 在 
对 应 可 编辑 区 域 顶 部 的 矩形 标签 中 。 

(4) 设 定好 可 编辑 区 域 之 后 ， 需 要 运行 “文件 "| ”保存 ”命令 保存 所 做 的 修改 ， 
此 时 会 显示 “更 新 模板 文件 ”对 话 框 (如 图 7-10 所 示 )， 单 击 “ 更 新 ”按钮 ， 即 可 在 
应 用 模板 的 页 面 中 编辑 该 区 域 。 例 如 ， 将 前 面 名 称 为 “moban” 模 板 中 的 “公司 
简介 ”区 域 定义 为 “可 编辑 区 域 ”( 如 图 7-11), 编辑 过 后 的 product 页 面 如 图 7-12 
所 示 。 


更 新 模板 文件 


图 7-9 “新 建 可 编辑 区 域 ” 对 话 框 图 7-10 “更 新 模板 文件 ”对 话 框 
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7-12 ”修改 过 后 的 product 页 面 


2. 删除 可 编辑 区 域 


如 果 在 模板 中 设置 了 可 编辑 区 域 但 又 想 锁定 它 ， 即 将 其 设 为 不 可 编辑 ， 则 需要 
使 用 “删除 模板 标记 ”选项 。 操 作 步 骤 如 下 : 

(1) 选中 要 锁定 的 可 编辑 区 域 ， 即 单 击 该 可 编辑 区 域 的 名 称 。 

(2) 选择 “修改 ”|“ 模 板 ”|“ 删 除 模板 标记 ”命令 。 

G) 最 后 ， 选 择 “ 文 件 ”|“ 保 存 ” 命 令 ， 保 存 所 做 的 修改 。 此 时 会 显示 “更 新 
模板 文件 ”对 话 框 ， 单 击 “ 更 新 ”按钮 ， 即 可 在 应 用 模板 的 页 面 中 锁定 该 区 域 。 


° 192 ° 


©, 
第 7 章 模板 和 框架 p 


d 


7.2 ”框架 


在 浏览 网 页 时 ， 我 们 经 常会 遇 到 这 样 一 种 导航 结构 ， 就 是 位 于 左边 的 超级 链接 
被 单 击 以 后 ， 链 接 的 目标 会 出 现在 页 面 右 边 ; 在 上 边 单 击 链接 以 后 ， 指 向 的 目标 页 
面 出 现在 下 边 。 要 做 出 这 样 的 效果 必须 使 用 框架 ， 其 实 大 家 在 前 面 的 HTML 语言 中 
已 经 学 习 过 框架 的 使 用 ， 本 节 我 们 就 来 学 习 一 下 Dreamweaver 中 框架 的 使 用 。 


7.2.1 框架 简介 


框架 将 每 个 浏览 器 窗口 分 为 多 个 独立 的 区 域 ， 每 个 区 域 (框架 ) 显 示 一 个 单独 的 
可 滚动 页 面 ,每 个 框架 都 是 浏览 器 窗口 内 的 一 个 独立 窗口 。 典 型 的 框架 页 面 如 图 7-13 
所 示 ， 这 是 某 个 珠宝 店 的 产品 宣传 靡 页 。 该 网 页 由 3 个 框架 组 成 ， 每 个 框架 单独 显 
示 一 张 网 页 。 顶 部 框架 用 于 显示 横幅 广告 ， 对 应 于 页 面 top.html; 左 侧 框架 放置 商 
品类 别 列表 ， 用 于 页 面 导航 ， 对 应 于 页 面 left.html; 右 侧 窗口 用 于 显示 某 类 珠宝 商 
品 的 具体 信息 ， 对 应 于 页 面 main.html。 为 了 方便 浏览 ， 当 浏览 者 单 击 左 侧 商 品 列表 
的 超 链 接 时 ， 右 侧 窗口 则 显示 相应 的 商品 信息 。 
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图 7-13 网 页 中 的 多 个 框架 页 面 
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722 ”框架 的 用 法 


一 个 网 页 可 以 有 一 个 或 多 个 框架 。 框 架 的 一 些 用 法 如 下 : 

(1) 在 网 页 的 一 个 固定 部 分 显示 Logo 或 静态 信息 。 

D) 左 侧 框架 显示 目录 ， 右 侧 框架 显示 内 容 ， 用 户 只 需要 单 击 左 侧 窗口 的 目录 ， 
在 右 侧 窗 口中 就 会 显示 相应 内 容 ， 如 网 上 在 线 学 习 教 程 、 产 品 介绍 等 。 

(3) 多 视图 允许 设计 人 员 在 滚动 或 操纵 网 页 上 的 其 他 内 容 时 使 某 些 信息 静止 
不 动 。 

遗憾 的 是 , 不 是 所 有 的 浏览 器 都 支持 框架 , 并且 如 果 浏 览 器 窗口 被 划分 为 过 多 的 
TADO, 还 会 影响 网 页 的 整体 美观 , 所 以 , 网 页 设计 人 员 常 常 使 用 表格 布局 来 代替 它 。 


72.3 用 Dreamweaver 制作 框架 网 页 


在 Dreamweaver 中 制作 框架 网 页 有 两 种 方法 : 第 一 种 是 事前 准备 好 每 个 框架 对 
应 的 网 页 (如 上 述 框 架 网 页 需要 准备 3 个 单独 的 网 页 ， 分 别 为 top.html、left.html 和 
main.html), 然后 把 这 些 独立 的 网 页 和 相应 的 框架 相关 联 ; 第 二 种 方法 是 直接 在 空白 
的 框架 中 添加 内 容 。 

下 面 介绍 框架 的 制作 过 程 。 

1. 新 建 框架 网 页 


要 新 建 框架 网 页 ， 需 事前 规划 网 页 的 设计 布局 ， 然 后 执行 如 下 步骤 。 

(1) 选择 “文件 ”|“ 新 建 ”命令 。 

(2) 在 “新 建文 档 ” 对 话 框 中 ， 选 择 “ 示 例 中 的 页 ”|“ 框 架 页 ”选项 。 
G) 从 “框架 页 ” 右 侧 的 列表 中 选择 一 个 合适 的 示例 页 ， 如 图 7-14 所 示 。 
(4) 单 击 “ 创 建 ” 按 钮 ， 即 可 成 功 创建 框架 网 页 。 


2. 设置 框架 集 的 属性 


新 建 的 框架 网 页 ， 默 认为 没有 边框 ， 用 户 可 以 通过 属性 检查 器 设置 它 的 边框 宽 
度 、 调 整 框架 的 宽度 和 高 度 等 。 
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图 7-14 选择 合适 的 示例 页 


要 设置 框架 集 的 属性 ， 请 执行 如 下 步骤 : 

(1) 选中 框架 集 : 将 鼠标 指针 移 至 某 个 边框 的 边框 线 ， 然 后 单 击 ， 这 时 将 选中 
整个 框架 集 ， 如 图 7-15 所 示 。 

(2) 设置 框架 集 的 边框 宽度 : 通过 “框架 集 ” 属 性 检查 器 ， 修 改 边框 设置 为 
“是 ”， 边 框 宽度 设置 为 “1”。 

要 调整 某 个 框架 的 宽度 或 高 度 , 可 将 鼠标 移 至 框架 的 边框 线 , 左右 或 上 下 拖 动 。 
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图 7-15 选中 框架 集 
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3. 添加 每 个 框架 的 内 容 


如 果 事前 没有 准备 每 个 框架 的 网 页 内 容 ， 可 以 直接 在 这 些 空白 的 框架 中 插入 内 
容 ， 然 后 在 保存 的 时 候 , 选择 “文件 ”|“ 保 存 全 部 ”命令 ,逐个 保存 框架 集中 的 每 
个 框架 网 页 。 

如 果 事前 已 经 准备 好 了 每 个 框架 的 网 页 内 容 ， 就 可 以 设置 每 个 框架 所 关联 的 网 
页 。 要 设置 每 个 框架 对 应 的 网 页 文件 ， 可 以 执行 以 下 操作 。 

(1) 选择 “菜单 ”|“ 框 架 ” 命 令 , 打开 框架 面板 , 展开 框架 的 缩 略图 , 如 图 7-16 
所 示 。 


7-16 框架 面板 


(2) 单 击 框架 面板 中 的 每 个 框架 ， 属 性 检查 器 中 会 出 现 相应 框架 的 属性 ， 如 
图 7-17 所 示 ， 单 击 “ 源 文件 ”旁边 的 文件 夹 图 标 ， 选 择 该 框架 对 应 的 网 页 。 

(3) 按照 同样 的 方法 设置 其 他 框架 所 对 应 的 网 页 。 

(4) 每 个 框架 Dreamweaver 都 有 个 默认 的 名 称 ， 如 顶部 框架 默认 为 topFrame、 
左 方 框架 默认 为 leftFrame、 右 方 框架 默认 为 mainFrame， 如 图 7-16 所 示 。 单 击 “ 框 
架 名 称 ” 文 本 框 ， 可 以 修改 其 名 称 。 
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7-17 设置 框架 对 应 的 网 页 文件 


(5) 框架 内 容 添加 后 的 效果 如 图 7-18 所 示 。 
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7-18 框架 内 容 添 加 效果 


4. 设置 超 链接 


左边 窗口 内 容 为 珠宝 商品 的 类 别 ， 现 在 希望 当 用 户 单 击 这 些 商品 类 别 的 超 链接 
时 ， 链 接 的 网 页 将 会 在 右边 主 窗口 中 打开 ， 右 边 窗口 的 名 称 是 “mainFrame”。 

左边 窗口 中 的 商品 类 别 及 对 应 超 链 接 如 图 7-18 所 示 。 

要 达到 上 述 效 果 ， 可 执行 如 下 步骤 。 

(1) 选中 要 设置 超 链接 的 文本 ， 如 “Entire Collection” o 

(2) 选择 “窗口 ”|“ 属 性 ”命令 ， 弹 出 属性 检查 器 窗口 。 

G) 单 击 链接 文件 图 标 ， 选 择 链接 文件 ， 如 “main html”。 

(4) 单 击 “ 目 标 ” 下 拉 列 表 框 ， 选 择 超 链接 在 哪个 框架 中 打开 ， 这 里 为 了 在 右 
方 框架 打开 ， 所 以 选择 “mainFrame”， 如 图 7-19 所 示 。 
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7-19” 超 链接 的 属性 窗口 


5. 预览 网 页 


要 预览 网 页 ， 可 以 按 快捷 键 “F12” 或 单 击 工具 栏 中 的 预览 图 标 ， 即 可 看 到 网 
页 的 显示 效果 。 单 击 左边 窗口 中 的 商品 类 别 ， 链 接 内 容 将 会 在 右 方 窗口 中 显示 。 


如 果 希 望 保存 某 个 框架 的 内 容 ， 可 以 选中 该 框架 ， 然 后 单 击 菜单 “ 文 
件 ”|“ 框 架 另 存 为 ”选项 。 如 果 希 望 全 部 保存 ， 可 以 单 击 “ 文 件 ”|“ 保 存 
全 部 ”选项 ，Dreamweaver 将 会 逐个 提示 用 户 保存 框架 。 为 了 维护 方便 ， 保 
存 顶 部 框架 网 页 时 ， 一 般 命 名 为 top.html; 保存 左 侧 框架 网 页 时 ， 一 般 命名 
为 left.html; 保存 右 侧 框架 网 页 时 ， 一 般 命 名 为 right.html 或 main.html; 保 
存 整 张 框架 集 网 页 时 ， 一 般 命 名 为 整个 页 面 的 主题 html， 如 jewelryhtml。 
下 次 浏览 网 页 时 ， 直 接 打开 jewelryhtml PPT. 
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【小 结 】 


° 为 了 保持 整个 站 点 外 观 和 风格 的 一 致 性， 可 使 用 模板 。 模 板 可 从 现 有 文档 
中 创建 ， 也 可 从 空白 文档 开始 创建 
° 框架 将 Web 浏览 器 窗口 分 割 为 多 个 独立 的 区 域 ， 每 个 区 域 显示 一 个 可 独立 


滚动 的 页 面 
[ 自 测 题 】 
1. 模板 会 自动 保存 在 ( 。”) 中 ， 该 文件 夹 在 站 点 的 本 地 根 文件 夹 下 。 
A. Library 文件 夹 B. Custom 文件 夹 
C. Assets 文件 夹 D. Templates 文件 夹 


2. 在 模板 中 选择 了 可 编辑 区 域 后 ， 删 除 该 区 域 的 步骤 是 ( )o 
A. “修改 ”|“ 模 板 ”|“ 去 除 模板 标记 ” 
B. “修改 ” |“ 模板”|“ 删 除 模板 标记 ” 
C. “修改 ”|“ 库 ”|“ 去 除 模板 标记 ” 
D. “修改 ”|“ 模 板 ”|“ 移 动 模板 标记 ” 
3. 将 现 有 模板 应 用 到 新 建 页 面 的 步骤 是 ( )。 
A. “修改 ”|“ 模 板 ”|“ 应 用 模板 到 页 ” 
B. “修改 ”|“ 模 板 ”|“ 去 除 模 板 标记 ” 
“修改 ”|“ 模 板 ”|“ 更 新 当前 页 ” 
“修改 ”|“ 模 板 ”|“ 更 新 页 ” 


Q 


g 
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【上 机 部 分 】 


上 机 目标 


° 模板 的 使 用 
° 使 用 框架 


上 机 练习 
+ 第 一 阶段 * 


练习 1: 在 Dreamweaver 中 模板 的 使 用 


【问题 描述 】 
在 上 一 章 中 已 经 为 网 站 项 目 定义 了 本 地 站 点 并 创建 了 两 个 页 面 ， 在 本 次 练习 中 
将 使 用 模板 为 该 网 站 项 目 创建 其 他 网 页 。 


【问题 分 析 】 
使 用 Dreamweaver 将 上 一 章 中 所 创建 的 页 面 success.html 打开 ， 并 将 其 另存 为 
模板 ， 然 后 通过 该 模板 创建 站 点 的 另 一 个 页 面 contact.html。 


【参考 步骤 】 

(1) 如 果 由 于 某 些 原因 使 上 一 章 在 Dreamweaver 中 创建 的 站 点 “我 的 站 点 ”不 存 
在 , 请 参照 上 一 章 中 的 第 一 阶段 再 次 创建 站 点 , 还 是 以 myweb 文件 夹 作为 本 站 点 的 
本 地 根 文件 夹 ， 站 点 的 名 称 还 是 “我 的 站 点 ”"。 如 果 上 一 章 在 Dreamweaver 中 创建 
的 站 点 “我 的 站 点 ”还 存在 ， 该 步骤 可 以 省 略 。 

(2) 双击 “文件 ”面板 中 的 success.html, 将 success.html 在 Dreamweaver 中 打开 。 

G) 选择 “文件 ”|“ 另 存 为 模板 ”命令 ， 将 出 现 “ 另 存 为 模板 ”对 话 框 ， 如 
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图 7-20 所 示 。 在 此 对 话 框 中 ， 从 “站 点 ”下 拉 列 表 中 选择 要 保存 模板 的 站 点 (在 此 为 
“我 的 站 点 ”)， 并 在 “另存 为 ” 框 中 输入 模板 的 名 称 (在 此 为 “moban”)。 


站 点 : z] 


E 


另存 为: m 一 帮助 0 


图 7-20 “另存 为 模板 ”对 话 框 


(4) 单 击 “ 保 存 ” 按 钮 ， 此 时 myweb 文件 夹 中 将 自动 创建 Template 文件 夹 ， 而 
最 新 创建 的 Template 文件 夹 中 将 自动 创建 文件 moban.dwt。 

(5) 选中 要 设置 为 可 编辑 区 域 的 区 域 。 在 此 页 面 中 要 设置 可 编辑 区 域 的 区 域 为 
suc_case.gif、succpic.gif 和 手动 添加 的 文本 所 在 的 单元 格 。 

(6) 选择 “插入 ”| “模板 对 象 ”|“ 可 编辑 区 域 ”命令 。 

(7) 在 出 现 的 “新 建 可 编辑 区 域 ”对 话 框 (如 图 7-21 所 示 ) 的 “名 称 ” 框 中 ， 为 该 
区 域 输入 一 个 唯一 的 名 称 ， 同 一 名 称 不 能 使 用 两 次 。 


7-21 “新 建 可 编辑 区 域 ”对 话 框 


(8) 输入 名 称 后 ， 单 击 “ 确 定 ” 按 钮 ， 然 后 选择 “文件 ”|“ 保 存 ” 命 令 ， 将 修 
改过 的 moban.dwt 页 面 保存 。 

O) 选择 “文件 ”|“ 新 建 ”命令 ， 在 出 现 的 “新 建文 档 ” 对 话 框 中 ， 单 击 “ 模 
板 ” 按 钮 ， 将 切换 到 “模板 ”选项 卡 ， 如 图 7-22 所 示 。 


°201° 


m° HTML 网 页 设计 — 


图 7-22 “从 模板 新 建 ”对 话 框 


(10) 在 “模板 用 于 ”选项 栏 中 选择 要 应 用 模板 的 站 点 ， 在 “站 点 “我 的 站 点 "” 
选项 栏 中 选择 要 应 用 于 页 面 的 模板 。 

(11) 单 击 “ 创 建 ” 按 钮 ， 即 可 通过 选中 的 模板 创建 一 个 页 面 。 选 择 “ 文 件 ”| 
“保存 ”命令 将 页 面 保存 ， 并 假设 为 其 命名 为 “contact”"， 如 图 7-23 所 示 。 


Qurcase sudes 


ee 
图 7-23 ”从 模板 新 建 页 面 


(12) Æ contact 页 面 里 将 图 片 suc_case.gif 删 除 , 在 此 单元 格 中 插入 图 片 contact_case.gif。 

(13) 将 succpic.g 让 删除 ， 并 且 将 succpic.g 计 旁边 和 下 面 的 文本 删除 。 

(14) 按 住 饼 标 左 键 并 拖 动 ， 将 删除 内 容 的 空 单 元 格 选中 。 

(15) 选择 属性 栏 中 的 合并 单元 格 按钮 (如 图 7-24 所 示 )， 将 选中 的 单元 格 合并 成 
一 个 单元 格 。 
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Contact Our casa studies Í 


下 
图 7-24 选中 要 合并 的 单元 格 
(16) 在 合并 后 的 单元 格 里 添加 文本 并 将 文本 格式 化 ， 使 其 居中 对 齐 。 


(17) 设置 好 文本 后 ， 选 择 “ 文 件 ”|“ 保 存 ” 按 钮 ， 并 按 F12 快捷 键 在 浏览 器 里 
浏览 ， 最 终 效果 如 图 7-25 所 示 。 


7-25 contact 页 面 浏览 
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练习 2: 在 Dreamweaver 中 框架 的 使 用 


【问题 描述 】 
使 用 Dreamweaver 练习 制作 框架 网 页 frame.html， 效 果 如 图 7-26 所 示 。 单 击 左 
边 窗口 中 的 链接 ， 将 在 右边 窗口 中 显示 链接 内 容 。 左 边 窗口 中 的 链接 依次 链接 到 上 
几 次 阶段 练习 的 网 页 : index.html、success.html、contact.html 和 registerhtml。 


文件 四 FEV RO) IRV BD 
+E Gag Qm se gar J| a 39 
TUDI 


欢迎 光临 HTML 学 习 园 地 


My 
Business 


7-26 frame 页 面 浏览 


【问题 分 析 】 
参照 第 5 章 理 论 部 分 的 “用 Dreamweaver 制作 框架 网 页 ”章节 创建 一 个 框架 集 
网 页 。 


! 选择 “文件 ”|“ 保 存 全 部 ”命令 将 框架 逐个 保存 。 假 设 整体 框架 为 
1 frame.html, 顶部 框架 为 top html, 左边 框架 为 lefthtml, 右边 框架 为 righthtml。 


W 注意 - 和 ` 
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在 顶部 框架 和 左边 框架 中 依次 加 入 如 图 7-26 所 示 的 文本 内 容 。 


分 别 为 左边 框架 的 导航 文字 加 上 链接 ， 并 分 别 链接 到 index.html、success.html、 
contact.html 和 register.html。 注 意 其 链接 目标 的 设置 。 选 择 “ 窗 口 ”|“ 框 架 ” 命 令 ， 


框架 ”面板 打开 ， 查 看 目标 处 的 框架 名 称 。 


【 课 后 作业 】 


为 可 


1. 在 站 点 myCompany 里 将 company 页 面 另存 为 模板 。 并 将 要 编辑 的 区 域 定 义 


编辑 区 域 。 
2. 通过 模板 创建 一 个 页 面 product.html， 并 将 其 编辑 成 如 图 7-27 所 示 。 


+ + OOA Qm arar gue GD ad J 


HERED) fÆ) E:\mywebiproduct.htmi v] osa | 链接 > 
e ofe j © =s. PE š = 


关于 品 拓 nma AORN 赛 户 列表 合作 次 村 联系 我 们 


关于 曲折 口 EELE: 
公司 简介 
公司 理念 
ange 
anna 
加 入 我 们 


图 7-27 product 页 面 浏览 


3. 通过 模板 创建 第 二 个 页 面 contacthtml, 并 在 此 页 面 内 添加 注册 表单 ,如 图 7-28 
所 示 。 
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1 联系 我 们 


HER 
语 给 入 您 的 姓名 ; [ 


waagen: [2000 z] = [t Z] 8 A 8 
请 输入 您 的 电子 邮件 地 址 : 


烽 是 否 查 看 过 我 们 的 在 线 产品 昌 录 ? C z C = 


如 果 查 看 过 ,您 对 哪些 产品 有 兴趣 购买 ? 
D 平面 手册 C DTC 一 钻石 传奇 D thg P 东风 标致 


ENRI HA ELREN? 


z 
i = = 
l — — 


7-28 contact 页 面 浏览 


4. 通过 模板 创建 第 三 个 页 面 creavite html， 并 添加 相应 文本 信息 ， 如 图 7-29 所 示 。 


amme waw annuw ERRA 


关于 品 拓 口 | 创意 制作 3 


公司 简介 


anget - 
ante - PR. EE TV a m 
anpa - PREE Print ad 
maan - PEHR Corporate Logo 
IERE Product Package 
PE, IEE TVC & Broadcasting Ads 厂 告 促销 品 POPs 
AT 手册 VT Manual 
PÈNIS? Corporate Borchure 
PAREI ersletter 
全 业 事物 用 品 及 礼品 freeims 
PARUE: WHE RAKAVO H. MO PERNAR RNG. 
1 自给 对 于 晤 拓 而 言 永远 重 于 广告 奖项 的 区 得。 


7-29 creavite 页 面 浏览 
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5. 分 别 给 网 站 内 每 个 页 面 对 应 的 导航 栏 添加 链接 ， 使 每 个 页 面 之 间 能 相互 跳 

转 。 链 接 如 下 : “关于 品 拓 ”链接 到 “company.html”, “成 功 案 例 ” 链 接 到 

“product.html”,， “行销 传播 ”链接 到 “creavite.html”, “联系 我 们 ”链接 到 
“contact.html”, “HOME” 链 接 到 “index.html”。 
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= | 
= 
@ 课程 目标 
> 了 解 网 站 开发 流程 
P 掌握 网 站 开发 的 实际 方法 
P 掌握 如 何 使 用 DIV 和 样式 表 布局 


< 


"g 
HTML 网 页 设计 


pna 


在 前 面 的 课程 中 ， 我 们 系统 地 学 习 了 如 何 制作 网 页 ， 这 些 知识 足以 使 我 们 制作 
出 一 个 出 色 的 、 漂 亮 的 、 绝 对 有 吸引 力 的 网 页 。 

那么 ， 请 思考 这 样 一 个 问题 : 我 们 接 到 客户 的 一 个 订单 ， 需 要 制作 一 个 购物 网 
站 ， 使 用 户 能 够 方便 地 通过 互联 网 进行 购物 。 当 然 ， 网 站 中 与 用 户 交互 的 需要 用 程 
序 实 现 的 部 分 我 们 现在 还 无 法 实现 ， 但 网 页 的 样式 、 布 局 等 ， 以 我 们 现在 的 知识 是 
完全 可 以 实现 的 。 请 思考 ， 我 们 该 如 何 实现 这 个 购物 网 站 。 

我 想 ， 大 家 更 多 的 是 觉得 无 从 下 手 。 是 不 是 已 经 想到 了 很 多 ， 但 是 不 知道 怎么 
才能 将 这 些 想到 的 内 容 组 织 并 结合 在 一 起 ， 形 成 一 个 可 供 人 使 用 的 购物 系统 ? 没有 
关系 ， 接 下 来 将 给 大 家 讲解 ， 如 何 将 我 们 想到 的 变 成 实际 能 够 实现 的 ， 也 就 是 网 站 
的 开发 流程 。 


8.1 网 站 开发 流程 


8.1.1 建立 站 点 


要 做 一 个 网 站 ， 首 先 需 要 建立 一 个 站 点 。 那 么 什么 是 站 点 ? 为 什么 要 建立 一 个 
站 点 呢 ? 因为 网 站 不 同 于 其 他 文件 ， 比 如 一 个 图 片 ， 放 到 哪个 盘 哪 个 目录 下 都 可 以 
访问 ， 而 网 站 是 许多 文件 相互 关联 的 ， 所 以 需要 专门 建 一 个 目录 把 它们 分 门 别 类 存 
放 起 来 。 做 过 视频 编辑 的 人 都 知道 ， 需 要 先 建立 一 个 工程 ， 把 原始 的 视频 文件 、 图 
片 素材 分 类 放 好 ， 网 站 也 是 这 个 道理 。 下 面 以 在 D 盘 建立 一 个 jiaocheng 文件 夹 为 
例 , 在 Dreamweaver( 简 称 DW) 里 创建 一 个 站 点 指向 这 个 文件 夹 , 然后 在 目录 下 新 建 
images 文件 夹 、css 文件 夹 等 把 各 类 文件 分 别 存 放 起 来 ， 如 图 8-1 一 图 8-3 所 示 。 
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保存 后 ， 一 个 站 点 就 建立 起 来 了 。 如 果 要 连接 FTP， 则 需要 设置 服务 器 选项 (后 
面 会 涉及 到 )。 建 立 好 站 点 后 , 我 们 再 建立 一 个 images 文件 夹 和 一 个 css 文件 夹 ， 分 
别 用 来 存放 图 片 和 css 文件 。 可 以 直接 在 Windows 的 资源 管理 器 下 建立 或 者 在 DW 
里 建立 。 在 DW 里 建立 时 ， 需 要 在 文件 面板 列表 的 根 目 录 上 右 击 ， 选 择 新 建文 件 夹 
后 更 改名 字 即 可 ， 如 图 8-4 所 示 。 


Cul+Shift+D 
RAO Ctrl+Alt+Shift+D 
Ctrl+Shift+U 
Ctrl +Alt+Shift+U 


图 8-1 新 建站 点 图 8-2 定义 站 点 名 设置 


A 资源 | 代码 片断 


8-3 ”站 点 高 级 设置 8-4 在 DW 里 新 建文 件 夹 
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84.2 ”结构 分 析 


创建 完 站 点 后 ， 就 需要 对 页 面 结构 进行 分 析 了 。 根 据 效果 图 ， 分 析 页 面 分 为 几 
个 版 块 ， 该 怎么 布局 更 合理 。 图 8-5 是 一 个 企业 网 站 的 模板 ， 虽 然 不 怎么 好 看 ， 但 
目的 是 把 前 边 学 的 东西 全 都 给 串 起 来 ， 让 大 家 掌握 各 种 情况 的 处 理 方法 。 效 果 图 及 
在 网 页 中 显示 的 样式 ， 如 图 8-5 和 图 8-6 所 示 。 


A 企业 名 和 


企业 新 闻 
WS: 


联系 我 们 


企业 动态 产品 资讯 ”通知 公告 


产品 导购 
苹果 iphone 4 手机 将 于 9 月 25 日 在 中 国 上 市 
= f 大 陆 市 场 全 面 推出 


语音 业务 : 
O EIE EEN 


lo] 语音 北 务 : 
FARE | atp 


P| Eats: 
(O) 普通 电话 | 语音 数字 中 继 


> 好 CSS 实现 三 列 DIV 等 高 布局 
HTML 元 素 的 1D 和 Name 属 性 的 区 别 
完美 兼 罕 ie6,ie7,ie8 以 及 firefox@9css 远 明 轩 入 
DIV+CSS 实 现 放大 镇 效果 的 分 页 样式 
javascript 为 FF 设置 首页 
ORRIREN 


使 用 问答 


加 最 新 出 的 这 个 产品 如 何 使 用 人 
O 该 产 品 采用 全 新 的 技术 , 较 上 一 产 
品 有 盾 的 飞跃 ， 功 能 上 才 强 了 许 

多 ， 使 用 方法 更 加 简便 … 


加 最 新 出 的 这 个 产品 如 何 使 用 人 
O 该 产 品 采用 全 新 的 技术 ， 较 上 一 ,… 


加 最 新 出 的 这 个 产品 如 何 使 用 人 
O 该 产 品 采用 全 新 的 技术 ， 较 上 一 产 
DABI HELET.. 


O 最 新 出 的 这 个 产品 如 何 使 用 
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图 8-6 网 页 中 的 显示 样式 


从 图 8-6 中 可 以 看 出 整个 页 面 分 为 头 部 区 域 、 导 航 区 域 、 主 体 部 分 和 底部 ， 其 
中 主体 部 分 又 分 为 左右 两 列 ， 整 个 页 面 居 中 显示 。 看 明白 了 这 一 点 ， 下 面 的 框架 就 
好 搭建 了 。 整 体 框架 如 图 8-7 所 示 。 


headers 


nay. 


8-7 页 面 整体 框架 
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84.3 ”搭建 框架 


首先 在 DW 里 新 建 一 个 html 文件 ， 如 图 8-8 所 示 。 


= wm 
S =n = wm 
UU =: sure 
[ sm = suon 
= mma Sms 
= ActionScript 
D mapan = = 
D JavaScrip 
Ed = m. 
D ASP JavaScript 
Wx < js WScript 
D ASP.NET CE 
D ASP. NET VB 
D ColdFusion 
> a n 组 件 [oa 1 O Transitional Z] 
1 位 置 : | 添加 到 文档 头 Zi 
Mim css 文件 - 
uno | messo.. mo] o | 


图 8-8 新 建 html 文件 


单 击 “ 创建 按钮 后 会 自动 生成 如 下 代码 所 示 的 一 个 html 文件 , 保存 为 ndex.html 
并 把 无 标题 文档 改 为 主页 。 强调 一 点 : 许多 同学 喜欢 把 第 一 行 代码 删除 掉 , 认为 没 用 ， 
其 实 这 旬 话 的 作用 很 大 ， 它 标明 了 以 何 种 形式 解析 文档 ， 如 果 删 除 可 能 会 引起 样式 
表 失 效 或 其 他 意 想不到 的 问题 。 接 下 来 需要 插入 各 个 块 的 标签 了 ， 以 插入 header 的 
标签 为 例 ， 其 他 的 插入 方法 类 同 。 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
<title> 主 页 </title> 

</head> 

<body> 

</body> 

</html> 


选择 “插入 ”|“ 布 局 对 象 ”|“Div 标签 ”命令 ， 弹 出 如 图 8-9 所 示 的 对 话 框 。 


图 8-9 插入 标签 对 话 框 


按照 上 面 的 方法 依次 插入 标签 , 或 者 直接 在 代码 视图 中 手工 输入 ,代码 如 下 ( 注 


意 main 和 side 已 经 包含 在 maincontent 里 ): 


<div id="header"> 此 处 显示 id "header" 的 内 容 </div> 
<div id="nav"> 此 处 显示 id "nav" 的 内 容 </div> 
<div id="maincontent"> 
<div id="main"> 此 处 显示 id "main" 的 内 容 </div> 
<div id="side"> 此 处 显示 id "side" 的 内 容 </div> 
</div> 
<div id="footer"> 此 处 显示 id "footer" 的 内 容 </div> 


从 前 面 的 效果 图 分 析 得 知 ， 整 个 网 页 是 居中 于 浏览 器 显示 的 ， 按 照 这 样 的 写法 
需要 把 header、nav、maincontent、footer 都 设置 宽度 并 居中 ， 这 样 做 起 来 很 麻烦 ， 
所 以 再 在 这 些 标签 外 增加 一 个 父 标签 ， 设 置 这 个 父 标 签 的 宽度 并 居中 后 ， 所 有 的 标 
签 就 都 居中 了 ， 增 加 后 的 代码 如 下 : 


<div id="container"> 
<div id="header"> 此 处 显示 id "header” 的 内 容 </div> 
<div id="nav"> 此 处 显示 id "nav” 的 内 容 </div> 
<div id="maincontent"> 
<div id="main"> 此 处 显示 id "main" 的 内 容 </div> 
<div id="side"> 此 处 显示 id "side" 的 内 容 </div> 
</div> 
<div id="footer"> 此 处 显示 id "footer" 的 内 容 </div> 
</div> 


html 框架 代码 写 完 后 ， 就 该 设置 css 样式 表 了 。 先 测量 下 效果 图 的 整体 宽度 ， 
然后 将 container 也 设置 为 这 个 宽度 并 居中 。 说 起 测量 效果 图 的 宽度 ， 方 法 有 多 种 : 
可 以 直接 查看 图 片 尺寸 ， 如 果 需 测量 其 中 某 一 块 的 宽度 ， 可 以 使 用 测量 软件 ， 也 可 
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以 用 Photoshop 测量 。 一 般 在 Photoshop 下 测量 ， 因 为 效果 图 是 在 Photoshop 下 制作 
的 , 所 以 用 Photoshop 测量 比较 方便 。 方 法 是 在 首选 项 里 将 Photoshop 的 单位 改 为 像 
素 ， 然 后 用 选区 选中 要 测量 的 部 分 ， 在 信息 面板 中 就 显示 出 当前 选区 的 尺寸 了 。 
测量 后 得 知 : 整体 宽度 为 900px，main 部 的 宽度 为 664px，side 宽度 为 228px。 

把 这 3 个 基本 的 宽度 测量 后 ， 就 可 以 写 css 代码 了 。 由 于 本 实例 是 按照 实际 应 用 来 做 
的 ， 所 以 css 样式 表 最 好 写 在 单独 的 文件 里 ， 不 要 再 写 在 文件 内 部 了 ， 这 样 可 以 利用 
代码 的 重用 性 , 减少 很 多 劳动 强度 。 下 面 就 新 建 一 个 css 样式 表 文 件 , 如 图 8-10 所 示 ， 
在 DW 文件 菜单 中 选择 新 建 选 项 ， 然 后 在 打开 的 窗口 页 面 类 型 中 选择 css 选项 ， 如 
图 8-11 所 示 ， 创 建 后 保存 在 css 文件 夹 中 并 命名 为 layout.css， 如 图 8-12 所 示 。 


TERN 布局 
=- m 
D eer = m ae 
< sug 
D em $ son 
= 库 项 目 FERD 


GY pepon — ActionScript 


Ehren |S 


y xu = ASP Jersseript 
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图 8-10 新 建 CSS 样式 表 


Css 样 式 
[es am 
所 有 规则 
链接 外 部 样式 表 xj 
XLO: EOS J m 这 | 
Sme wao mA 
C sv: — a] 
信也 可 以 入 入 过 全 的 可 体 类 型 列表 。 
Ee 2053 Dresmresver 的 区 例 插 式 去 本 以 帮助 您 步 — wm | 
图 8-11 单 击 链接 外 部 样式 表 8-12 ”链接 外 部 样式 表 
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保存 后 先 设置 全 局 样式 ， 然 后 再 写 每 一 块 单独 的 样式 ， 全 局 样式 代码 如 下 : 


body í margin:0 auto; font-size:12px; font-family:Verdana: line-height:1.5;} 
ul,dl,dd,h1,h2,h3,h4,h5,h6,form.p { padding:0; margin:0;} 

ul { list-style:none:} 

img í border:0px:} 

a { color:#05a; text-decoration:none;} 

a:hover { color:#f00:) 


全 局 样式 定义 完 后 ， 再 定义 各 版 块 的 样式 ， 先 设置 #container 的 样式 ， 如 下 所 示 : 
#container { width:900px: margin:0 auto:} 


预览 index.html 页 面 ， 发 现 并 没有 改变 ， 这 是 为 什么 呢 ? 因为 刚才 定义 的 样式 
表 没有 与 html 文件 关联 ， 所 以 设置 的 样式 当然 不 能 对 它 生效 了 。 还 记得 前 面 所 讲 的 
几 种 样式 并 联 方 式 吗 ? 再 来 操作 一 遍 : 在 css 面板 中 单 击 “ 附 加 样式 表 ” 按 钮 ， 然 
后 在 弹出 的 窗口 中 选择 刚才 创建 的 样式 表 文 件 ， 再 单 击 “ 确 定 ” 按 钮 ， 就 可 以 了 。 
预览 一 下 ， 是 不 是 整体 已 经 居中 了 呢 ? 

如 果 已 经 是 宽度 为 900px 并 居中 的 版 块 ， 说 明 样 式 和 文件 关联 好 了 。 这 就 是 为 
什么 要 定义 一 个 站 点 了 ， 因 为 许多 文件 要 关联 在 一 起 才能 构成 一 个 完整 的 网 页 ， 所 
以 要 把 它们 放 在 一 起 ， 才 能 让 这 个 页 面 找到 和 它 相关 的 文件 在 哪里 。 下 面 设 置 内 部 
各 版 块 的 样式 ， 为 了 便于 观察 ， 我 们 把 部 分 版 块 设置 了 背景 色 。 代 码 如 下 : 


/*body*/ 
#container í width:900px: margin:0 auto:} 


/*header*/ 
#header { height:70px: background:#CCFFCC: margin-bottom:8px:} 
#nav { height:30px: background:#CCFFCC: margin-bottom:8px:} 


/*main*/ 

#maincontent { margin-bottom:8px:} 

#main { float:left: width:664px: height:500px: background:#FFFF99:} 
#side { float:right: width:228px: height:S00px: background:#FFCC99:} 


/*footer*/ 
#footer { height:70px: background:#CCFFCC:} 
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现在 再 来 预览 一 下 : 在 下 6 F, #maincontent 的 底部 外 边 距 并 没有 生效 ， 而 在 
IE 8 F, #footer 直接 移 到 #maincontent 的 下 边 了 ， 这 又 是 怎么 回 事 呢 ? 这 就 是 之 前 
讲 的 ， 如 果 一 个 容器 内 的 元 素 都 浮动 的 话 ， 那 么 它 的 高 度 将 不 会 去 适应 内 部 元 素 的 
高 度 。 解决 办 法 是 在 #maincontent 里 增加 overflow:auto; zoom:1;, 这 样 就 可 以 使 它 自 
动 适应 内 部 元 素 的 高 度 。 

再 预览 一 下 , 是 不 是 都 正常 了 ? 为 了 更 加 保险 ,建议 在 header、 nav, maincontent, 
footer 之 间 增加 如 下 一 句 代码 并 设置 css 样式 如 下 ， 它 的 作用 是 清除 浮动 。 


<div class="clearfloat"></div> 
.clearfloat {clear:both;height:0;font-size: 1px:line-height: 0px: 


<html xmlns="http://www.w3.ore/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> £ BL </title> 

<link href="http://www.aa25.cn/upload/2010-09/16/layout.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div id="container"> 

<div id="header"> 此 处 显示 id "header" 的 内 容 </div> 
<div class="clearfloat"></div> 

<div id="nav"> 此 处 显示 id "nav” 的 内 容 </div> 

<div class="clearfloat"></div> 

<div id="maincontent"> 

<div id="main"> 此 处 显示 id "main” 的 内 容 </div> 
<div id="side"> 此 处 显示 id "side” 的 内 容 </div> 
</div> 

<div class="clearfloat"></div> 

<div id="footer"> 此 处 显示 id "footer" 的 内 容 </div> 
</div> 

</body> 

</html> 


8.1.4 切割 效果 图 


基本 框架 搭建 完毕 后 , 下 一 步 就 要 分 析 每 一 块 该 怎么 切 图 了 。 切 图 方法 有 多 种 ， 
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可 以 使 用 Photoshop 或 Fireworks 自 带 的 切片 工具 , 也 可 以 用 QQ 的 截屏 或 者 创建 新 
文件 ， 或 者 把 需要 的 部 分 复制 过 来 保存 的 方法 ， 关 键 看 个 人 喜好 。 

切割 完 后 ， 需 要 保存 图 片 。 选 择 “ 文 件 ”|“ 存 储 为 web 和 设备 所 用 格式 ”， 在 
弹出 的 窗口 中 单 击 选中 切片 ， 然 后 在 右 侧 可 以 设置 当前 切片 的 图 片 格式 。 这 里 有 个 
技巧 ,一 般 色彩 单一 的 小 型 图 片 ， 采用 g 让 格式 ， 照 片 类 大 型 图 片 采用 jpg 格式， 这 
样 生成 的 图 片 既 能 保证 质量 ， 图 片 体积 又 小 。 

设置 完 图 片 的 格式 后 , 就 可 以 存储 了 , 这 里 选择 到 images 的 上 一 级 目录 就 行 了 ， 
Photoshop 会 自动 创建 images 目录 并 把 图 片 文件 放 入 ， 如 果 已 存在 ， 直 接 放 入 即 可 。 

目前 所 切 的 图 片 只 是 一 部 分 ， 并 没有 把 整个 页 面 所 需 的 图 片 全 都 切割 下 来 ， 比 
如 导航 部 分 所 用 背景 图 片 可 以 放 到 一 张 图 片上 ， 下 面 就 用 新 建文 件 和 QQ 截屏 粘贴 
的 方法 来 创建 。 

分 析 一 下 图 8-13 的 导航 部 分 : OWWA: @@ 鼠 标 划 过 状态 和 当前 栏目 状态 
宽度 应 该 随 着 字数 的 多 少 而 改变 ; @ 二 级 导航 有 鼠标 划 过 时 的 状态 。 分 析 完 之 后 ， 就 
需要 把 图 片 整 合 到 一 张 图 上 了 ， 整 合 的 结果 如 图 8-14 所 示 ， 这 个 可 以 根据 自己 的 需 
要 进行 整合 。 其 实 完全 可 以 把 其 他 一 些小 图 标 也 整合 在 一 起 ， 但 那样 操作 起 来 比较 
麻烦 ， 所 以 我 们 还 是 归 类 一 下 ， 把 相关 的 图 标 整合 到 一 起 ， 如 图 8-14 所 示 。 


8-13 用 QQ 截屏 图 8-14 整合 后 的 背景 图 片 


接 下 来 整合 侧 边栏 的 背景 图 片 ,如 图 8-15 所 示 , 经 分 析 发 现 侧 边栏 应 用 同样 的 
样式 ， 只 不 过 高 度 有 所 不 同 ， 而 且 是 四 角 都 是 圆 角 ， 所 以 只 用 一 个 通用 的 就 可 以 满 
足 所 有 侧 边栏 块 的 需求 了 。 那么 怎么 制作 这 个 通用 背景 呢 ? 从 图 8-15 可 以 看 出 ， 标 
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题 的 高 度 都 是 一 样 的 ， 只 是 下 面 的 内 容 高 度 不 同 而 已 ， 因 此 我 们 把 下 边 内容 的 背景 
制作 的 足够 长 ,超过 可 能 出 现 的 最 大 高 度 就 可 以 满足 需求 了 .整合 后 的 效果 如 图 8-16 
所 示 。 
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O BAS: 
P sñmme | 语音 救 字 中 继 
语音 业务 : 
° 普通 电话 | 语音 元 字 中 继 
T 语音 业务 : 
普通 电话 | 语音 教 字 中 继 


图 8-15 侧 边栏 背景 图 图 8-16 标题 背景 图 片 


如 果 你 现在 还 不 明白 为 什么 要 这 么 做 ， 那 么 一 会 儿 写 完 样式 表 你 就 明白 了 。 下 
面 把 3 个 图 标 也 给 切 出 来 ， 如 图 8-17 所 示 。 

做 完 这 些 以 后 ， 还 需 做 “联系 我 们 ”的 图 片 和 修饰 小 图 标 。“ 联 系 我 们 ”的 图 
片 如 图 8-18 所 示 , 这 里 的 图 片 和 小 图 标的 背景 都 要 设 为 透明 ,这样 才 不 会 误 盖 下 面 
的 背景 ， 如 图 8-19 所 示 。 


口 
° 
a ° 
g 400? 
123-4567 
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图 8-17 标题 图 标 图 8-18 “联系 我 们 ”的 图 片 图 8-19 问答 小 图 标 
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8.2 CSS 布局 页 面 


824 头 部 和 导航 


有 了 上 面 的 基础 ， 下 面 的 任务 就 是 利用 html 和 css 制作 一 个 完整 的 网 页 。 先 从 
头 部 开始 ， 在 8.1.3 小 节 我 们 已 经 把 整体 框架 给 搭建 好 了 ， 就 像 盖 房子 一 样 ， 整 体 
结构 已 经 出 来 了 ， 下 面 就 需要 分 割 空间 了 。 先 分 析 一 下 头 部 : 头 部 分 为 两 部 分 ， 一 
个 是 logo， 靠 左 侧 显示 ;一 个 是 搜索 ， 靠 右 侧 显示 。 因 此 ， 布 局 时 需 插入 两 个 div， 
一 个 向 左 浮动 ， 一 个 向 右 浮动 。 另 外 还 有 很 多 种 实现 方法 ， 如 logo 用 hl 标签 ， 搜 
索 用 span, 或 者 把 logo 作为 背景 图 片 也 是 可 以 的 。 不 管 采 用 哪 种 方法 ， 要 根据 页 面 
的 需求 选用 一 种 最 合理 的 方法 。 如果 要 给 logo 加 上 链接 的 话 ， 那 么 就 不 能 用 背景 图 
片 的 方法 了 。 


<div id="header"> 

<div id="logo"> 此 处 显示 id "logo" 的 内 容 </div> 
<div id="search"> 此 处 显示 id "search" 的 内 容 </div> 
</div> 


先 在 header 里 插入 以 上 两 块 元 素 , 然后 分 别 插入 相应 的 内 容 , 在 logo 里 插入 事 
先 切割 好 的 logo 图 片 ， 在 search 里 插入 一 个 表单 、 一 个 文本 框 和 一 个 按钮 ， 插 入 后 
代码 如 下 所 示 。 

<div id="header"> 

<div id="logo"><img src="images/logo.gif" width="181" height="45" /></div> 


<div id="search"> 
<form id="form1" name="form1" method="post" action=""> 


搜索 产品 : 
<input type="text" name="textfield" id="textfield" /> 


<input type="submit" name="button" id="button" value=" 查 询 " /> 


</form> 


ss 


< 
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</div> 

</div> 

接 下 来 定义 css。 经 过 在 Photoshop 里 的 测量 ， 头 部 的 高 度 是 71px, logo 距 顶 部 
18px， 搜 索 产 品 距 顶 部 30px。 下 面 在 css 里 把 这 些 参数 都 给 定义 上 ， 看 显示 的 效果 
和 效果 图 中 的 效果 是 不 是 一 样 的 。 


#logo { float:left; margin-top:18px;} 
#search { float:right; margin-top:30px;} 


这 两 项 的 位 置 已 经 差不多 了 。 预 览 时 用 户 会 发 现 ， 搜 索 框 和 按钮 与 效果 图 中 的 
不 一 样 , 这 是 因为 我 们 还 没 对 它 设置 样式 。 接 下 来 把 文本 框 增加 一 个 class 为 inp_srh 
样式 ， 按 钮 增加 btn_sm 的 样式 ， 然 后 定义 这 两 个 样式 的 属性 。 代 码 如 下 : 

#search { float:right; height:24px; margin-top:30px; color:#444:} 

.inp_srh í width:140px: height:17px: padding-left:20px: background:url(../images/srh_bg.gif) 0 0 

no-repeat; border:1px solid #cbcbcb;} 

.btn_srh í width:58px: height:23px; background:url(../images/btn_srh.gif) 0 0 no-repeat; 


border:none; cursor:pointer; text-indent:-999em:; } 
#search * í vertical-align:middle:} 


我 们 给 search 增加 了 高 度 和 文字 颜色 ， 高 度 之 所 以 是 24px， 是 因为 IE 6 的 版 
本 低 ， 大 家 测试 一 下 就 知道 了 。 

inp_sm 的 宽度 和 高 度 并 不 是 实际 效果 图 中 的 宽 高 , 是 因为 默认 情况 下 文本 框 带 
有 内 边 距 造 成 的 ， 另 外 ，padding 的 值 也 会 算 到 总 宽度 上 。 

btn sh 就 是 应 用 背景 图 像 来 实现 的 ， 值 得 说 明 的 是 ， 这 里 border 的 值 为 none 
指 的 是 无 边框 ，cursor 定义 鼠标 样式 为 手 形 ， 之 前 有 人 用 hand， 但 这 个 不 会 被 W3C 
认证 。 

text-indent:-999em 这 个 属性 许多 用 户 可 能 不 理解 是 干什么 用 的 ， 它 的 作用 相当 
于 word 中 的 首 行 缩 进 ,这 里 设置 成 -999, 意思 是 向 左 侧 缩 进 -999em， 这样 是 不 是 就 
看 不 到 文字 了 ? 所 以 它 的 作用 是 将 按钮 上 的 文字 隐藏 。 当然 也 可 以 在 html 代码 中 插 
入 空格 代替 文字 ， 但 这 样 做 有 点 不 太 好 ， 在 不 支持 css 的 设备 上 查看 时 ， 用 户 就 不 
知道 这 个 按钮 的 作用 是 什么 ， 所 以 建议 采用 向 左 缩 进 形式 。 
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最 后 一 行 的 特殊 之 处 是 在 样式 名 和 大 括号 之 间 加 了 一 个 * 号 ， 这 里 兼容 所 用 的 ， 
属于 css hack 部 分 内 容 , 是 定义 这 些 元 素 都 垂直 居中 对 齐 。css hack 本 身 就 是 无 意思 
的 内 容 ， 所 以 不 做 过 多 解释 ， 知 道 需要 垂直 居中 对 齐 时 采用 这 种 写法 就 行 了 ， 但 是 
一 定 不 要 滥用 ， 这 个 属性 也 是 有 缺陷 的 ， 当 有 英文 和 中 文 同 时 出 现时 ， 英 文 将 靠 上 


Al 


显示 。 


这 些 都 设置 完 后 , 把 最 初 搭建 框架 时 设置 的 header 的 背景 色 和 底部 外 边 距 给 
去 掉 。 


#header { height:71px:} 


至 此 ， 头 部 的 样式 就 完成 了 ， 下 面 该 制作 导航 了 。 导 航 分 为 一 级 导航 和 二 级 导 
所 以 需要 在 nav 下 再 插入 nav_main 和 nav_son 两 个 块 元 素 。 


z 


<div id="nav"> 

<div id="nav 1"></div> 

<div id="nav_r"></div> 

<div class="nav_main"> 

<ul> 

<li><a href="#"><span> WL </span></a></li> 
<li><a href="#" id="nav_current"><span> 企 业 新 闻 </span></a></li> 
<li><a hre 伍 "#"'><span> 企 业 简介 </span></a></li> 
<li><a hre 仁 "#"><span> 产 品 展厅 </span></a></li> 
<li><a hre 伍 "#"><span> 企 业 历 史 </span></a></li> 
<li><a hre 伍 "#'><span> 招 商 加盟 </span></a></li> 
<li><a hre 仁 "#"><span> 网 上 下 单 </span></a></li> 
<li><a hre 仁 "#"><span> 联 系 我 们 </span></a></li> 
</ul> 

</div> 

<div class="nav_son"> 

<ul> 

<li><a hre 伍 "#"> 企 业 动态 </a></li> 

<li><a hre 伍 "#"> 领 导 活动 </a></li> 

<li><a hre 伍 "#"> 产 品 资讯 </a></li> 

<li><a hre 伍 "#> 通 知 公告 </a></li> 

<l 

</div> 

</div> 
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先 设置 nav 的 高 度 及 背景 图 片 样式 。 
#nav { height:66px; background:url(../images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;} 
然后 ， 再 设置 一 级 菜单 和 二 级 菜单 的 样式 。 


-nav_main { height:36px: overflow:hidden:} 

.nav_main ul li { float:left; font-size:14px; font-weight:bold: margin:5px 5px 0 Spx:} 
.nav_main ul li a { float:left; display:block; height:26px: line-height:26px; color:#fff; 
padding-left:20px:} 

nav_main ul li a span í display:block; padding-right:20px:} 

.nav_main ul li a:hover í background:url(../images/nav_bg.gif) 0 -163px no-repeat:} 
.nav_main ul li a:hover span { background:url(../images/nav_bg.gif) right -163px no-repeat; } 
‘nav_main ul li a#nav_current í height:31px: line-height:31px; 
background:url(../images/nav_bg.gif) 0 -132px no-repeat: color:#646464:} 

‘nav_main ul li a#nav_current span { height:31px; background:url(../images/nav_bg.gif) right 
-132px no-repeat:} 

nav_son { height:30px:} 

.nav_son ul li { float:left; margin-top:4px:} 

‘nav_son ul li a { display:block; width:78px: height:22px; line-height:22px: text-align:center; 
color:#6e6e6e;} 

.nav_son ul li a:hover { background:url(../images/nav_bg.gif) 0 -198px no-repeat: } 


这 些 样式 的 作用 前 面 已 详细 讲解 过 了 , 此 处 不 再 闭 述 。 本 例 使 用 了 双 导 航 菜单 ， 
现在 在 浏览 器 下 预览 一 下 ， 看 看 效果 怎么 样 ， 是 不 是 和 效果 图 差不多 了 ? 但 还 有 最 
后 一 步 就 是 两 端的 圆 角 没 实现 ， 实 现 圆 角 的 方法 也 不 复杂 ， 只 需 再 增加 两 行 代码 和 
两 个 样式 即 可 。 在 nav 下 nav_main 之 前 增加 如 下 两 行 代码 


<div id="nav_1"></div> 
<div id="nav_r"></div> 


然后 用 样式 表 定义 一 个 左 侧 的 贺 角 和 一 个 右 侧 的 圆 角 。css 样式 如 下 : 

#nav_1 { float:left: height:66px: width:5px: overflow:hidden; background:url(../images/nav_bg.gif) 
0 -66px no-repeat: margin-right: 10px:} 

#nav_r { float:right; height:66px: width:Spx: overflow:hidden: 


background:url(../images/nav_bg.gif) -5px -66px no-repeat: } 


再 来 预览 一 下 ， 头 部 和 导航 是 不 是 和 效果 图 中 的 一 样 呢 ? 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 主 页 </title> 
<link href="http://www.aa25.cn/upload/2010-09/21/css/layout1.css" rel="stylesheet" 
type="text/css" /> 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
<div id="logo"> 
<img src="http://www.aa25.cn/upload/2010-09/2 1/images/logo.gif" 
width="181" height="45" /></div> 
<div id="search"> 
<form id="form1" name="form1" method="post" action=""> 
搜索 产品 
<input class="inp_srh" type="text" name="textfield" id="textfield" /> 
<input class="btn_srh" type="submit" name="button" id="button" value=" # ift" /> 
</form> 
</div> 
</div> 
<div class="clearfloat"></div> 
<div id="nav"> 
<div id="nav_1"></div> 
<div id="nav_r"></div> 


<div class="nav_main"> 
<ul> 
<li><a href="#"><span> Ë BL </span></a></li> 
<li><a href="#" id="nav_current"><span> 企 业 新 闻 </span></a></li> 
<li><a hre 伍 "#"><span> 企 业 简介 </span></a></li> 
<li><a hre 伍 "#"><span> 产 品 展厅 </span></a></li> 
<li><a hre 伍 "#"><span> 企 业 历史 </span></a></li> 
<li><a hre 伍 "#"><span> 招 商 加 盟 </span></a></li> 
<li><a hre 伍 "#"><span> 网 上 下 单 </span></a></li> 
<li><a hre 伍 "#"><span> 联 系 我 们 </span></a></li> 
</ul> 
</div> 
<div class="nav_son"> 
<ul> 
<li><a href="#">4=2JJ25</a></ñi> 
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<li><a href="#">%S382JJ</a></ñi> 
<li><a hre 伍 "#"> 产 品 资讯 </a></li> 
<li><a hre 人 ="#"> 通 知 公告 </a></li> 
</ul> 
</div> 
</div> 
<div class="clearfloat"></div> 
<div id="maincontent"> 
<div id="main"> 此 处 显示 id "main" 的 内 容 </div> 
<div id="side"> 此 处 显示 id "side" 的 内 容 </div> 
</div> 
<div class="clearfloat"></div> 
<div id="footer"> 此 处 显示 id "footer" 的 内 容 </div> 
</div> 
</body> 
</html> 
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主体 部 分 涉及 side 和 main 两 部 分 ， 虽 然 内 容 比 较 多 ， 但 都 不 难 。 主 体 部 分 先 
从 侧 边栏 说 起 ， 讲 解 如 何 切割 图 片 时 已 经 说 过 ， 侧 边栏 可 以 共用 一 个 样式 ， 下 面 就 
先 做 一 个 通用 的 ， 插 入 如 下 html 代码 : 

<div class="side box"> 

<h2><strong> 产 品 </strong> 导 购 </h2> 

<div class="side_con"> 此 处 显示 class "side_con” 的 内 容 </div> 

</div> 

这 里 的 标题 采用 h2 标签 ， 没 必要 再 用 div， 还 有 “产品 导购 ”中 “产品 ”二 字 
是 红色 字体 ， 这 里 用 strong 标签 ， 这 样 可 以 省 去 很 多 没 必要 的 定义 ， 所 以 在 页 面 布 
局 当中 一 定 要 合理 利用 每 一 个 标签 。 讲 到 这 里 , 有 必要 说 一 下 为 什么 不 能 是 div+css， 
而 应 该 是 xhtml+css， 因 为 div 只 是 xhtml 中 的 一 个 标签 ， 用 div+ess 会 让 用 户 误 认 
为 遇 到 块 级 元 素 就 得 用 div， 造 成 了 div 的 滥用 ， 而 合理 利用 每 个 标签 ， 才 是 Web 
标准 设计 的 一 个 准则 。 回 过 头 来 定义 侧 边栏 的 样式 如 下 : 


#side { float:right; width:228px:} 
.Side box í margin-bottom:8px:} 
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.Side_box h2 í height:25px: padding:6px 10px 0 10px; background:url(../images/side_bg.gif) 0 0 
no-repeat; font-size:14px; color:#444:} 

-side_box h2 strong í color:#f30;} 

-side_con í padding:10px; background:url(../images/side_bg.gif) 0 bottom no-repeat; } 


预览 一 下 , 是 不 是 整体 效果 出 来 了 ? 下 面 就 需要 定义 各 个 部 分 了 , 如 图 8-20 所 示 。 


产品 导购 
此 处 显示 dass “side_con" 的 内 容 
使 用 问答 
此 处 显示 dass “side_con" 的 内 容 
联系 我 们 
此 处 显示 dass "side_con" 的 内 容 


图 8-20” 右 列 效 果 图 


先 看 下 “产品 导购 ”， 内 容 分 为 三 部 分 ， 可 以 用 ul. li 列表 的 形式 实现 ， 前 面 
的 图 标 用 背景 图 片 来 实现 ， 可 以 在 i 上 设置 背景 图 片 ， 但 这 样 有 点 麻烦 ， 每 个 都 需 
要 设置 ， 而 且 还 得 定位 ， 更 简便 的 方法 是 定义 的 背景 图 片 ， 因 为 在 切 图 标 时 ， 每 
个 图 标 之 间 的 间距 是 按照 效果 图 的 间距 来 切 的 。 


<div class="side_box"> 

<h2><strong> 产 品 </strong> 导 购 </h2> 

<div class="side_con product"> 

<ul> 

<li><strong> 语 音 业务 : </strong><a hre 仁 "#"> 普 通电 话 </a> | <a href="#">18 A 3 s rh 3k 
</a></l> 

<li><strong> 语 音 业务 : </strong><a hre 仁 "#"> 普 通电 话 </a> | <a hre 伍 "#"> 语 音 数字 中 继 
</a></li> 

<li class="product3"><strong> 语 音 业务 : </strong><a hre 伍 "#"> 普 通电 话 </a> | <a href="#">18 
音 数字 中 继 </a></li> 

</ul> 

</div> 

</div> 


细心 的 用 户 已 经 发 现 , 这 里 的 class 后 跟 了 两 个 样式 名 称 , 说 明 一 个 元 素 是 可 以 
定义 多 个 样式 的 ， 中 间 用 空格 分 开 。 也 可 以 把 product 样式 定义 在 ul 上。 
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说 到 可 以 定义 多 个 样式 ， 再 来 强调 一 点 : 许多 新 手 朋 友 常 常 大 量 使 用 ， 这 是 不 
好 的 。 例 如 ， 在 一 个 块 元 素 需要 设置 边框 、 绿 色 文 字 和 灰色 背景 ， 所 以 就 在 css 里 
定义 : 

-border { border:1px solid #f60:} 


.Color { color:#080;} 
.bg { background:#ccc:} 


然后 在 块 元 素 上 增加 : 
<div class="border color bg"> 此 处 显示 新 Div 标签 的 内 容 </div> 


其 实 这 是 一 个 非常 不 好 的 写法 ， 这 样 表面 看 似 达 到 了 代码 重用 性 ， 但 实际 运用 
中 , 当 需 要 把 其 中 一 个 元 素 的 边框 改 为 2px 时 , 怎么 改 ? 如 果 把 .border 的 边框 改 了 ， 
那么 所 有 应 用 这 一 样式 的 元 素 就 都 改 了 。 如 果 再 在 代码 中 增加 一 个 样式 ， 那 么 又 得 
去 改 html 代码 ， 这 与 代码 和 结构 分 离 的 理念 相 违背 。 一 个 好 的 代码 布局 ， 不 管 以 后 
怎么 改 风格 ， 只 需 改 样式 表 ， 而 不 用 去 改 html 代码 ， 这 才 真正 做 到 了 两 者 分 离 。 

这 点 很 重要 ， 新 手 很 容易 犯 这 个 毛病 。 回 到 刚才 的 问题 上 ， 给 第 三 个 定义 一 
个 product3 样式 ， 然 后 在 样式 表 中 定义 它 的 底部 边框 为 “无 ”， 因 为 前 面 定 义 的 
底 边 框 为 1px 的 虚线 ， 而 最 后 一 个 不 需要 ， 所 以 单独 定义 一 个 样式 把 它 取 消 掉 ， 这 
里 的 product 是 根据 需要 自己 定义 的 名 称 ， 一 般 用 能 表达 这 块 内 容 意 思 的 简洁 英文 


来 表示 ， 或 者 用 拼音 。 


.product { padding:0px 10px:} 

.product ul í background:url(../images/icon2.gif) 5px 12px no-repeat:} 

„product ul li í height:58px: padding:14px 0 0 64px: border-bottom:1px dashed #dcdcdc; 
Color:#777:} 

.product ul li strong { display:block: height:24px: color:#333:} 

„product ul li a í color:#777:} 

.product ul li a:hover { text-decoration:underline:} 

.product ul li.product3 { border-bottom:none:} 


“产品 导购 ”完成 后 ， 下 面 该 “使 用 问答 ”了 。“ 使 用 问答 ”部 分 都 是 一 问 一 
答 的 形式 ， 问 答 各 采用 不 同 的 图 标 ， 而 且 问 的 文字 加 粗 了 ， 所 以 这 部 分 采用 dl, dt, 
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dd 的 形式 来 完成 。 


<div class="side_con ask"> 

<dl> 

<dt><a href="#"> 最 新 出 的 这 个 产品 如 何 使 用 ? </a></dt> 

<dd> 该 产品 采用 全 新 的 技术 ， 较 上 一 产品 有 质 的 飞跃 ， 功 能 上 增强 了 许多 ， 使 用 方法 更 加 
简便 ……</dd> 

</d> 

<dl> 

<dt><a href="#"> 最 新 出 的 这 个 产品 如 何 使 用 ? </a></dt> 

<dd> 该 产品 采用 全 新 的 技术 ， 较 上 一 …</dd> 

</dl> 

<dl> 

<dt><a href="#"> 最 新 出 的 这 个 产品 如 何 使 用 ? </a></dt> 

<dd> 该 产品 采用 全 新 的 技术 ， 较 上 一 产品 有 质 的 飞跃 ， 功 能 上 增强 了 .…</dd> 
</d> 

<dl> 

<dt><a href="#"> 最 新 出 的 这 个 产品 如 何 使 用 ? </a></dt> 

<dd> 该 产品 采用 全 新 的 技术 ， 较 上 一 产品 有 质 的 飞跃 ， 功 能 上 增强 .…</dd> 
</d> 

<dl> 

<dt><a href="#> 最 新 出 的 这 个 产品 如 何 使 用 ? </a></dt> 

<dd> 该 产品 采用 全 新 的 技术 ， 较 上 一 产品 有 质 的 飞跃 ， 功 能 上 增强 了 许多 ， 使 用 方法 更 加 
简便 …</dd> 

</dl> 

</div> 


„ask dl { padding:10px 0; border-bottom: 1px dashed #dcdcdc:} 

„ask dl dt { height:22px; overflow:hidden; font-weight:bold: background:url(../images/icon.gif) 0 
-149px no-repeat: padding-left:20px:} 

.ask dl dt a { color:#666:} 

„ask dl dd { color:#666: backeround:url(../images/icon.gif) 0 -198px no-repeat: 
padding-left:20px:} 


“使 用 问答 ”完成 后 ， 侧 边栏 就 剩 下 “联系 我 们 ”了 ， 这 个 更 简单 ， 直 接 插 入 
图 片 ， 然 后 调整 一 下 位 置 就 可 以 了 。 


<div class="side box"> 

<h2><strong> 联 系 </strong> 我 们 </h2> 

<div class="side_con contact"><a href="#"><img src="images/tel.gif" width="222" height="112" 
</a></div> 
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</div> 
„contact í padding:2px;} 


823 主体 部 分 


左右 两 块 。 先 来 布局 主体 部 分 的 顶部 ， 项 部 实际 上 还 是 左右 两 列 布局 ， 没 什么 复杂 
之 处 ， 就 不 再 写 代码 了 ， 本 节 结 尾 会 提供 实例 的 源 代码 。 讲 解 一 点 ， 热 点 新 闻 列 表 
中 的 日 期 用 一 个 span 标签 写 在 了 内 容 的 前 面 ， 然 后 把 span 向 右 浮动 就 实现 了 ， 
“个 人 登录 ”和 “商户 登录 ”的 实现 方法 也 是 如 此 。 

把 代码 复制 到 本 例 的 幻灯 图 片 位 置 ， 如 图 8-21 所 示 。 


37 cdiv id="huandeng"> 


38 日 <script l|language='jauascript'> 

39 linkarr = new ñrrau(); 

ao picarr = new Array(); 

m textarr = new Array(); 

a2 var swf_width=248; 

43 għt=178; 

hy upload/special/xinshou.jpg|/upload/2010-09/16/ 
45 special/xinshou/index.shtml |/div_css/911.shtnl 
46 2 

"v 日 ipicarr .length;ir*){ 

48 if(files=="") files = picarr[i]; 

a9 else files += “|"+picarr[i]; 

50 > 

5 B for(i=1;i<linkarr.length;i++){ 

52 if(links=="") links = linkarr[i]; 

53 else links += "|"+linkarr[i]; 

54 》 

55 B for(i=1;i<textarr .length;i++){ 

56 if(texts=="" ) texts = textarr[i]; 

57 else texts += “|"*textarr[i]; 

58 》 

59 docunent -write("《object classid="clsid:d27cdb6e-ae6d-11cf-96t 
60 document -write('<param name="movie" value="/v3/images/indexpi 
61 document.urite('<param name="menu" value="false"><param nane= 
62 document.urite('<param name="FlashUars" ualue="bcastr_file='* 
63 document. .write(' <embed src="/u3/imaqes/indexpic.swF" wnode="c 
64 </script> 

65 </div>? 


8-21 插入 幻灯 片 代码 


下 载 实 现 幻灯 的 swf 文件 到 本 地 images 文件 夹 下 , 地 址 为 : http://www.aa25.cn/ 
v3/images/indexpic.swf。 接 下 来 修改 /v3/images/indexpic.swf 为 images/indexpic.swf, 
修改 swf width 和 swf height 的 值 为 269px 和 210px; files 的 值 为 图 片 路 径 ，links 
为 图 片 的 链接 地 址 , texts 为 标题 名 称 , 中 间 也 用 | 分 隔 , 这 样 就 实现 了 幻灯 图 片 展 示 。 
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幻灯 实现 后 ， 接 下 来 该 中 间 部 分 的 图 片 列表 了 ， 和 前 面 学 习 的 横向 图 文 列表 是 
一 样 的 ， 唯 一 的 区 别 就 是 多 了 一 个 标题 。 在 index_top 下 插入 如 下 代码 : 


<div id="index_ pic"> 

<h2><span></span></h2> 

<ul> 

<li><a href="#"><img src="images/pic4.gif" width="107" height="87" /> 产品 名 称 </a></li> 
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" /> 产品 名 称 </a></li> 
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" /> 产品 名 称 </a></li> 
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" /> 产品 名 称 </a></li> 
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" /> 产品 名 称 </a></li> 
<li><a href="#"><img src="images/pic4.gif' width="107" height="87" /> 产品 名 称 </a></li> 
<li><a href="#"><img src="images/pic4.gif' width="107" height="87" /> 产品 名 称 </a></li> 
<li><a href="#"><img src="images/pic4.gif' width="107" height="87" /> 产品 名 称 </a></li> 
<l 


</div> 


#index_pic í border:1px solid #dbdbdb; margin-bottom:8px;} 

#index_pic h2 { height:28px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom: 1px 
solid #dbdbdb:) 

#index_pic h2 span { display:block; height:25px: background:url(../images/rmcp.gif) 12px 6px 
no-repeat: } 

#index_pic ul { padding:0 0 15px 0; overflow:auto; zoom:1;} 

#index_pic ul li { width: 107px; float:left; margin:15px 0 Opx 21px; display:inline; 
text-align:center:} 

#index_pic ul li a í display:block:} 

#index_pic ul li img í margin-bottom:3px:} 


本 例 中 “热门 产品 ”的 图 标 采 用 了 背景 图 片 ， 也 可 以 采用 直接 插入 一 个 图 片 ， 
但 从 用 户 体 验 的 角度 来 讲 ， 这 些 图 片 还 是 以 背景 图 片 插入 为 好 ， 因 为 背景 图 片 在 整 
个 页 面 加 载 过 程 中 是 后 来 加 载 的 。 
图 片 列 表 完 了 之 后 ， 主 体 部 分 就 剩 下 “企业 历史 ”和 “招商 加 盟 ” 两 块 了 。 这 
两 块 也 是 应 用 左右 浮动 的 方式 实现 。 这 两 块 的 代码 就 不 贴 出 来 了 ， 一 会 儿 看 实例 。 
这 里 需要 强调 的 是 more:hover 的 写法 ， 因 为 more 直接 加 在 a 上 ， 所 以 鼠标 经 过 的 
样式 就 不 用 再 写 a 了 ， 也 可 以 写成 amore:hover。 
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8.2.4 底部 和 细节 调整 


底部 比较 简单 ， 灰 色 背 景 部 分 可 以 用 类 标签 完成 ， 也 可 以 用 d、dt、dd 来 完 
成 ， 还 可 以 用 其 他 标签 来 完成 ， 其 他 的 标签 就 不 再 更 述 。 

底部 完成 后 ， 最 后 的 步骤 是 要 做 一 些 细节 调整 ， 比 如 该 对 齐 的 地 方 是 否 对 齐 ， 
图 片 的 alt 属性 是 否 都 加 上 了 ， 在 各 种 浏览 器 下 是 否 显示 一 样 等 。 至 此 ， 整 个 首页 页 面 
就 制作 完成 了 ， 下 面 的 任务 就 是 用 程序 来 读 取 数据 库 里 的 内 容 了 ， 以 完成 整个 站 点 
的 制作 。 

浏览 器 的 兼容 问题 一 直 是 让 新 手头 疼 的 地 方 ， 其 实 只 要 掌握 几 个 常用 浏览 器 的 
特性 后 ， 不 需要 过 多 的 css hack 就 可 以 解决 问题 。 本 例 中 使 用 的 css hack 大 致 有 : 


zoom=1: 用 来 解决 自 适 应 高 度 时 IE 6 的 兼容 问题 (这 个 属性 不 会 被 W3C 认证 ); 
display:inline: 解决 IE 6 双 倍 边 距 bug 问题 ; 

* 在 样式 名 和 属性 中 间 加 *， 这 个 常用 在 需要 垂直 居中 时 使 用 ; 

IE 63 像素 bug: 在 布局 时 采用 左右 都 浮动 的 办 法 避免 了 这 个 问题 ; 


另外 ， 还 有 一 些 做 法 也 是 为 了 解决 兼容 问题 而 写 的 ， 比 如 固定 高 度 ， 就 是 因为 
各 浏览 器 之 间 的 解释 有 差异 ， 为 了 使 显示 效果 尽 可 能 一 样 而 采用 的 折 中 办 法 。 总 之 
遵循 一 点 ，css hack 能 少 用 尽量 少 用 ， 这 样 便于 以 后 维护 。 

完成 这 样 一 个 布局 有 多 种 方法 ， 本 例 中 所 讲解 的 方法 ， 只 是 个 人 的 观点 ， 不 一 
定 是 最 好 的 方法 ， 希 望 大 家 通过 本 例 的 学 习 能 做 到 举一反三 ， 掌 握 更 多 的 方法 。 

本 例 是 左 宽 右 窄 型 的 布局 ,如果 想 把 两 者 调换 位 置 ,再 简单 不 过 了 ,只 需 把 #main 
和 #side 的 向 左 向 右 浮动 调换 一 下 即 可 ， 这 是 表格 布局 所 不 及 的 。 所 以 不 管 #main 和 
#side 在 html 代码 中 是 谁 先 谁 后 , 让 它们 显示 在 哪里 完全 是 css 来 完成 的 。 这 里 建议 
将 #main 的 代码 写 在 #side 前 面 ， 因 为 在 页 面 加 载 的 过 程 中 会 先 加 载 main 部 分 ， 用 
户 首先 看 到 的 是 主要 内 容 ， 搜 索引 擎 收录 时 也 会 先 找到 main 部 分 的 内 容 。 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
<title> 主 页 </title> 

<link href="http://www.aa25.cn/upload/2010-09/21/css/layout.css" rel="stylesheet" 


& 本 ° 
第 8 章 CSS 布局 应 用 实例 解析 


= 


type="text/css" /> 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
<div id="logo"> 
<img src="http://www.aa25.cn/upload/2010-09/21/images/logo.gif" alt=" 企 业 名 称 " width="181" 
height="45" /></div> 
<div id="search"> 
<form id="form1" name="form1" method="post" action=""> 
搜索 产品 
<input class="inp_srh" type="text" name="textfield" id=" 
<input class="btn_srh" type="submit" name="button" 
</form> 
</div> 
</div> 
<div class="clearfloat"></div> 
<div id="nav"> 
<div id="nav_1"></div> 
<div id="nav_r"></div> 
<div class="nav_main"> 


xtfield" /> 
button" value=" 查 询 " /> 


<ul> 
<li><a href="#"><span> BL </span></a></li> 
<li><a href="#" id="nav_current"><span> 企 业 新 闻 </span></a></li> 
<li><a hre 伍 "#"><span> 企 业 简介 </span></a></li> 
<li><a hre 伍 "#"><span> 产 品 展厅 </span></a></li> 
<li><a hre 人 ="#"><span> 企 业 历 史 </span></a></li> 
<li><a hre 伍 "#"><span> 招 商 加 盟 </span></a></li> 
<li><a hre 伍 "#"><span> 网 上 下 单 </span></a></li> 
<li><a href="#"><span> k RRI] </span></a></li> 
</ul> 
</div> 
<div class="nav_son"> 
<ul> 
<li><a hre 伍 "#"> 企 业 动 态 </a></li> 
<li><a hre 伍 "#"> 领 导 活动 </a></li> 
<li><a hre 伍 "#"> 产 品 资讯 </a></li> 
<li><a href 伍 "#> 通 知 公告 </a></li> 
</ul> 
</div> 
</div> 
<div class="clearfloat"></div> 
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<div id="maincontent"> 
<div id="main"> 
<div id="index_top"> 
<div id="pic"> 
<script language='Javascript' type="text/javascript"> 
linkarr = new Array(); 
picarr = new Array(): 
textarr = new Array(); 
var swf_width=269; 
var swf height=210; 
var files = 
"http://www.aa25.cn/upload/2010-09/21/images/pic.jpglhttp://www.aa25.cn/upload/2010-09/21/i 
mages/pic1.jpg|http://www.aa25.cn/upload/2010-09/21/images/pic2.jpg|http://www.aa25.cn/uploa 
d/2010-09/21/images/pic3. jpg"; 
var links = "#|#|#|#"; 
var text: 


for(i=1:i<picarr.length:i++)í 
if(files=="") files = picarr[i]; 
else files += "|"+picarr[i]: 
) 
for(i=1:i<linkarr.length:i++) í 
if(links=="") links = linkarr[i]: 
else links += "|"+linkarr[i]: 
) 
for(i=1:i<textarr.length:i++)í 
if(texts=="") texts = textarr[i]: 
else texts += "|"+textarr[i]; 
上 
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6. 
0,0,0" width="+ swf width +" height="'+ swf height +">'); 
document.write('<param name="movie" 
value="http://www.aa25.cn/upload/2010-09/21/images/indexpic.swf"><param name="quality" 
value="high">"); 
document. write('<param name="menu" value="false"><param name=wmode 


value="opaque">'); 
document. write('<param name="FlashVars" 
value="bcastr_file=+files+'&bcastr link='+links+'&bcastr title=+texts+"">'); 
document.write('<embed 
src="http://www.aa25.cn/upload/2010-09/21/images/indexpic.swf" wmode="opaque" 
FlashVars="bcastr file='+files+'&bcastr link—+links+'&bcastr title 一 +texts+'& menu="false" 
quality="high" width="'+ swf width +" height="'+ swf height +" 
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type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>'); 
</script> 
<div id="login"><span><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/21/images/btn_login1.gif" alt=" 个 人 用 户 登录 " 
width="131" height="39" /></a></span><a href="#"><img 
src="http://www.aa25.cn/upload/2010-09/21/images/btn_login.gif" alt=" 经 销 商 登录 " 
width="131" height="39" /></a></div> 
</div> 
<div id="hot_news"> 
<div id="news_top"> 
<hl> 苹 果 iPhone 4 手机 将 于 9 月 25 日 在 中 国 上 市 </h1> 
<p> 日 前 中 国联 通 正式 宣布 将 于 9 月 25 日 9 时 在 中 国 大 陆 市 场 全 面 推出 
iPhone 4， 并 为 iPhone 4 用 户 量 身 定制 了 合约 计划 。</p> 
</div> 
<div id="news_list"> 
<ul> 
<li><span>9-22</span><a href="#">4 CSS 实现 三 列 DIV 等 高 布局 </a></li> 
<li><span>9-22</span><a href="#">HTML 元 素 的 ID 和 Name 属性 的 区 别 
</a></li> 
<li><span>9-22</span><a hre 舍 "#"> 完 美 兼 容 IE 6.IE 7.IE 8 以 及 firefox 的 css 
透明 滤 镜 </a></li> 
<li><span>9-22</span><a href="#">DIV+CSS 实现 放大 镜 效果 的 分 页 样式 
</a></li> 
<li><span>9-22</span><a href="#">javascript 为 FF 设置 首页 </a></li> 
<li><span>9-22</span><a href="#"> H H| FIRAR Z IE. 任 兼容 版 
</a></li> 
</u> 
</div> 
</div> 
</div> 
<div id="index_pic"> 
<h2><span></span></h2> 
<ul> 
<li><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt=" 产 品名 称 " width="107" 
height="87" 放 产 品名 称 </a></li> 
<li><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt=" 产 品名 称 " width="107" 
height="87" /> 产品 名 称 </a></li> 
<li><a href="#"> 
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<img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt=" 产 品名 称 " width="107" 
height="87" /> 产品 名 称 </a></li> 
<li><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt=" 产 品名 称 " width="107" 
height="87" /> 产品 名 称 </a></li> 
<li><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt=" 产 品名 称 " width="107" 
height="87" /> 产品 名 称 </a></li> 
<li><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/2 1/images/pic4.gif" alt=" 产 品名 称 " width="107" 
height="87" /> 产品 名 称 </a></li> 
<li><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt=" 产 品名 称 " width="107" 
height="87" /> 产品 名 称 </a></i> 
<li><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt=" 产 品名 称 " width="107" 
height="87" /> 产品 名 称 </a></li> 
<li><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/2 1/images/pic4.gif" alt=" 产 品名 称 " width="107" 
height="87" /> 产品 名 称 </a></li> 
<li><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt=" 产 品名 称 " width="107" 
height="87" /> 产品 名 称 </a></li> 
</u> 
</div> 
<div id="index_box"> 
<div class="box"> 
<h2><a class="more" href="#"> E £ ..</a><span> Ak Jj sE</span></h2> 
<div class="box_con"> 
<dl> 
<dt><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/21/images/pic5.gif" alt=" 多 角度 对 比 苹果 iPod 
系列 真 机 " width="91" height="70" /></a></dt> 
<dd><a href="#"><strong> 多 角度 对 比 苹果 iPod 系列 真 机 </strong></a> 
言 : 北京 时 间 9 月 2 日 凌晨 1 点 苹果 在 旧金山 举行 新 品 发 布 会, 数码 特派 
记者 在 美国 现场 直播 &hellip:</dd> 
</d> 
<ul> 
<li><a href="#"># CSS 实现 三 列 DIV 等 高 布局 </a></li> 
<li><a href="#">HTML 元 素 的 ID 和 Name 属性 的 区 别 </a></li> 
<li><a href="#"> ERREA IE 6.IE 7.IE 8 以 及 firefox 的 css 透明 滤 镜 </a></li> 
<li><a href="#">DIV+CSS 实现 放大 镜 效 果 的 分 页 样式 </a></li> 
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<li><a href="#">javascript 为 FF 设置 首页 </a></li> 
<li><a href="#"> 复 制 到 系统 剪贴 板 之 正 . 任 兼 容 版 </a></li> 
<li><a href="#">DIV+CSS 实现 放大 镜 效 果 的 分 页 样式 </a></li> 
</ul> 
</div> 
</div> 
<div class="box box1"> 
<h2><a class="more" href="#"> E £ ..</a><span> Ak Jj sE</span></h2> 
<div class="box_con"> 
<dl> 
<dt><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/2 1/images/pic5.gif" alt=" 多 角度 对 比 苹果 iPod 
系列 真 机 " width="91" height="70" /></a></dt> 
<dd><a href="#"><strong> 多 角度 对 比 苹果 iPod 系列 真 机 </strong></a> 
导言 : 北京 时 间 9 月 2 日 凌晨 1 点 苹果 在 旧金山 举行 新 品 发 布 会 , 数码 特派 
记者 在 美国 现场 直播 hellip:</dd> 
</d> 
<ul> 
<li><a href="#"># CSS 实现 三 列 DIV 等 高 布局 </a></li> 
<li><a href="#">HTML 元 素 的 ID 和 Name 属性 的 区 别 </a></li> 
<li><a href="#"> 3E KHA IE 6.IE 7.IE 8 以 及 firefox 的 css 透明 滤 镜 </a></li> 
<li><a href="#">DIV+CSS 实现 放大 镜 效 果 的 分 页 样式 </a></li> 
<li><a href="#">javascript 为 FF 设置 首页 </a></li> 
<li><a hre 人 f="#"> 复 制 到 系统 剪贴 板 之 下, 任 兼 容 版 </a></li> 
<li><a href="#">DIV+CSS 实现 放大 镜 效 果 的 分 页 样式 </a></li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
<div id="side"> 
<div class="side_box"> 
<h2><strong> 产 品 </strong> 导 购 </h2> 
<div class="side_con product"> 
<ul> 
<li><strong> 语 音 业 务 : </strong><a hre 伟 "#"> 普 通电 话 </a> | <a href="#"> 语 音 
数字 中 继 </a></li> 
<li><strong> 语 音 业 务 : </strong><a hre 仁 "#"> 普 通电 话 </a> | <a hre 伍 "#"> 语 音 
数字 中 继 </a></li> 
<li class="product3"><strong> 语 音 业务 : </strong><a hre 伍 "#"> 普 通电 话 </a> | 
<a href="#"> 语 音 数 字 中 继 </a></li> 
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</ul> 
</div> 
</div> 
<div class="side_box"> 
<h2><strong> 使 用 </strong> 问 答 </h2> 
<div class="side_con ask"> 
<dl> 
<dt><a href 人 ="#"> 最 新 出 的 这 个 产品 如 何 使 用 ? </a></dt> 
<dd> 该 产品 采用 全 新 的 技术 ， 较 上 一 产品 有 质 的 飞跃 ， 功 能 上 增强 了 许多 ， 
使 用 方法 更 加 简便 .…</dd> 
</d> 
<dl> 
<dt><a hre 伍 "#"> 最 新 出 的 这 个 产品 如 何 使 用 ? </a></dt> 
<dd> 该 产品 采用 全 新 的 技术 ， 较 上 一 …</dd> 
</d> 
<dl> 
<dt><a hre 全 "六 "> 最 新 出 的 这 个 产品 如 何 使 用 ? </a></dt> 
<dd> 该 产品 采用 全 新 的 技术 ， 较 上 一 产品 有 质 的 飞跃 ， 功 能 上 增强 了 .…</dd> 
</d> 
<dl> 
<dt><a hre 仁 "#"> 最 新 出 的 这 个 产品 如 何 使 用 ? </a></dt> 
<dd> 该 产品 采用 全 新 的 技术 ， 较 上 一 产品 有 质 的 飞跃 ， 功 能 上 增强 …</dd> 
</d> 
<dl> 
<dt><a hre 全 "fi"> 最 新 出 的 这 个 产品 如 何 使 用 ? </a></dt> 
<dd> 该 产品 采用 全 新 的 技术 ， 较 上 一 产品 有 质 的 飞跃 ， 功 能 上 增强 了 许多 ， 
使 用 方法 更 加 简便 …</dd> 
</d> 
</div> 
</div> 
<div class="side_box"> 
<h2><strong> 联 系 </strong> 我 们 </h2> 
<div class="side_con contact"><a href="#"> 
<img src="http://www.aa25.cn/upload/2010-09/21/images/tel.gif" alt=" 联 系 我 们 " width="222" 
height="112" /></a></div> 
</div> 
</div> 
</div> 
<div class="clearfloat"></div> 
<div id="footer"> 
<dl> 
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<dt><a hre 伟 "#> 关 于 我 们 </a> || <a hre 伍 "#"> 产 品目 录 </a> || <a href="#"> 联 系 我 
们 </a> || <a href="#"'> 友 情 链接 </a> || <a href="#"> 反 馈 问 题 </a> || <ahref="#">J” 
告 合 作 </a></dt> 

<dd>Copyright &copy; 2007 - 2010 aa25.cn All Rights Reserved<br /> 
标准 之 路 ”版 权 所 有 京 ICP 备 10007159 号 </dd> 
</d> 
</div> 

</div> 
</body> 
</html> 


8.2.5 ”相对 路 径 和 相对 于 根 目 录 路 径 


在 相对 路 径 和 绝对 路 径 中 ，../ 表 示 返 回 上 一 级 ， 因 为 css 文件 在 css 文件 夹 里 ， 
图 片 在 images 文件 夹 下 ， 那 么 layout.css 就 需要 返回 上 一 级 找到 images 文件 夹 才 能 
找到 相应 的 图 片 。 直 接 文 件 夹 名 或 是 ./ 开 头 表 示 和 当前 平 级 ， 因 为 index.html 和 
images 文件 夹 平 级 。 不 管 是 带 ../ 还 是 不 带 ， 这 种 写法 都 叫 相 对 路 径 ， 另 一 种 叫 相对 
于 根 目录 路 径 ， 它 的 写法 必须 以 /开始 ， 意 思 是 从 根 目录 开始 一 级 一 级 向 下 查找 ， 不 
管 在 哪里 ， 要 使 用 pic4.gif 这 个 图 片 ， 路 径 都 必须 是 /images/pic4.gif; 还 有 一 种 写法 
叫绝 对 路 径 ， 是 以 http:// 加 域名 开始 的 。 

使 用 相对 路 径 时 ， 当 根 目录 放 到 一 个 二 级 目录 下 时 ， 文 件 仍然 可 以 正常 访问 。 
而 使 用 相对 于 根 目录 路 径 时 ， 当 其 中 一 个 页 面 放 到 其 他 位 置 时， 照样 能 关联 相关 的 
图 片 和 其 他 文件 。 例 如 : 本 例如 果 用 相对 于 根 目录 路 径 的话 ， 把 index.htm 放 到 一 
个 文件 夹 下 后 ， 还 是 可 以 正常 访问 的 。 总 之 两 种 方法 各 有 优 和 劣 ， 可 以 根据 需要 采用 
一 种 合适 的 方法 。 相 对 路 径 和 相对 于 根 目录 路 径 是 可 以 相互 更 改 的 ， 在 站 点 管理 一 
编辑 一 高 级 设置 的 本 地 信息 里 有 “链接 相对 于 ”选项 ， 默 认为 文档 (就 是 所 说 的 相对 
路 径 ), 也 可 以 改 为 站 点 根 目录 , 相对 路 径 一 般 为 直接 目录 名 ， 需 要 返回 上 级 时 用 ../， 
向 上 返回 两 级 时 用 ../../; 相对 于 根 目录 路 径 始 终 以 /开头 , 不 管 该 文件 现在 在 哪 一 级 ， 
它 都 是 以 根 目 录 开 始 向 下 找 ， 如 图 8-22 所 示 。 
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|ayweh 的 站 点 定义 为 


图 8-22 ”站 点 路 径 设置 


【小 结 】 


@ 在 Dreamweaver 中 做 网 页 设计 时 先 新 建站 点 
° 网 页 布局 结构 一 般 是 上 中 下 或 左 中 右 形式 ， 其 任意 一 部 分 可 以 包含 更 小 的 
布局 结构 


[ 自 测 题 】 


1. 单个 网 页 的 整体 布局 一 般 通过 ( 。 “”) 来 实现 。 
A. table B. table+ 元 素 属性 


C. css D. css+div 
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2. 页 面 最 下 面 的 footer 导航 条 一 般 要 设置 哪 种 剪 切 效果 ? (。 ) 


A. clear:left B. clear:right 
C. clear:both D. clear:auto 

3. 以 “/” 开 头 的 路 径 称 为 ( )o 
A. 根 相 对 路 径 B. 相对 于 当前 网 页 的 路 径 
C. 绝对 路 径 D. 系统 路 径 


【上 机 部 分 】 


上 机 目标 


使 用 csstdiv 实现 网 页 布局 


上 机 练习 


+ 第 一 阶段 e 


练习 1: 使 用 css+div 实现 个 人 主页 


【问题 描述 】 
需要 实现 的 个 人 主页 如 图 8-23 所 示 。 


。241。 


° 5 ə 
HTML 网 页 设计 


火车 经 过 一 个 又 一 个 站 台 ， 宇 外 课 卷 的 稍 公 英 向 我 油 舌 车 。 我 逐渐 记 起 了 自己 旅行 的 目的 ,一直 
都 在 下 一 站 的 前 方 。 火 车 模 加 地 驶 入 站 台 ， 汽 薯 声响 的 那 一 占 间 ， 车 屠 变 得 透明 ， 我 看 见 ， 自 己 
和 这 长 长 的 列车 一 起 ,正在 漫天 瞄 舞 闭 的 荡 公 英 中 飞行 


我 现在 是 在 万 泉 河 附近 我 们 的 竺 基 车 就 在 旁边 不 远 的 地 方 ， 师 得 马上 将 会 把 车 开 过 来。 我 们 的 
wassssman Rurusakemia,Wshkau,. STRESS. M 
现在 师 二 已 经 把 竺 播 车 开 过 末了 。…… 


记 住 这 一 刻 


a 2 see Sua 


图 8-23 需要 实现 的 个 人 主页 


【问题 分 析 】 
该 网 页 存在 左右 边 距 且 所 有 内 容 水 平 居中 显示 ,宽度 为 700px。 整个 页 面 明显 分 为 
上 、 中 、 下 三 部 分 ， 其 中 中 间 部 分 又 分 为 左右 两 部 分 。 可 以 先 设置 布局 ， 后 调整 细节 。 


【参考 步骤 】 
(1) 新 建站 点 myweb， 在 站 点 下 新 建 images 和 css 文件 夹 ， 将 所 需 的 图 片 全 部 
复制 到 images 文件 夹 下 ， 在 css 文件 夹 下 添加 skin.css 文件 ， 在 网 站 根 目 录 下 新 建 
index.html 页 面 ， 完 成 后 的 站 点 结构 如 图 8-24 所 示 。 
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本 地 文件 大 小 
BO 站 点 -myweb 0:. 文人 
EB css 文 
=) skin css 2KB =: 
EB images 文人 
国 bannerl.jpg 64KB JPE 
bgl. jpz 43KB JPE 
container... 22KB JPE! 


selfpicl. jpg 45KB JPE 
selfpic2. jpg 48KB JPE! 


=) index.html 3KB HTM 
4| | +f 


8-24 ”站 点 结构 


(2) 按 上 中 下 结构 设计 index html 页 面 的 内 容 代码 如 下 。 


<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title> 个 人 主页 </title> 
<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<link rel="stylesheet" href="css/skin.css"/> 
</head> 
<body> 
<div id="container"> 
<div id="banner"> 
<img src="images/banner1.jpg" border="0"> 
</div> 
<div id="links"> 
<ul> 
<li> Ë BL </li> 
<l 户 心情 日 记 </li> 
<li>Free</li> 
<li>—EEHNi> 
<] 记 从 明天 起 </li> 
<] 记 纸 飞机 </li> 
<l 户 下 一 站 </li> 
</ul> 
<br> 
</div> 
<div id="leftbar"> 
<p><img src="images/selfpic1.jpg" class="pic1"> 
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<br> 我 的 日 记 本 </p> 

<p class="leftcontent"> 秋 天 过 半 的 时 候 ， 我 搭 上 了 一 列 火车 。 我 不 知道 它 将 要 去 往 的 
方向 ， 那 铁路 看 上 去 无 休 无 止 地 延伸 着 。</p> 

<p><img src="images/selfpic2 jpg" class="pic1"> 

<br> 心 情 轨迹 </p> 

<p class="leftcontent"> 无 意 间 发 现 ， 白 云 的 上 面 ， 长 着 许 许多 多 的 蒲公英 。 它 在 我 面 
前 迅速 的 长 大 ， 风 吹 过 的 时 候 ， 纷 纷 升 起 ， 飞 向 无 数 的 远方 。</p> 

</div> 
<div id="content"> 

<h4> 介 绍 </h4> 

<p> 火 车 经 过 一 个 又 一 个 站 台 ， 窗 外 漫 卷 的 蒲公英 向 我 微笑 着 。 我 逐渐 记 起 了 自己 旅 
行 的 目的 , 一 直 都 在 下 一 站 的 前 方 。 火 车 缓 缓 地 驶 入 站 台 , 汽笛 声响 的 那 一 瞬间 ， 车 厢 变 得 
透明 ， 我 看 见 ， 自 己 和 这 长 长 的 列车 一 起 ， 正 在 漫天 飘舞 着 的 薄 公 英 中 飞行 。</p> 

<h4> 转 播 设备 </h4> 

<p> 我 现在 是 在 万 泉 河 附近 ， 我 们 的 转播 车 就 在 旁边 不 远 的 地 方 ， 师 传 马 上 将 会 把 车 
开 过 来 。 我 们 的 转播 设备 非常 的 先进 ， 具 体 怎么 先进 我 也 说 不 清 ， 师 傅 比 我 清楚 ， 总 之 就 是 
特别 特别 先进 。 好 ， 现 在 师傅 已 经 把 转播 车 开 过 来 了 。&hellip:&hellip: 

</p> 

<h4> 旅 程 </h4> 

<p> 夕 阳 染 红 蓝天 <br> 

带 走 美好 的 一 天 <br> 

风 吹 过 大 地 <br> 

炫 美的 世界 <br> 

<br> 

霞光 点 亮 星辰 <br> 

燃 起 辽 远 的 梦幻 <br> 

流星 划 过 夜空 <br> 

忆 起 逝 夜 的 歌声 <br> 

<b> 

是 谁 昨 夜 背 上 行 圳 <br> 

唱 一 首 满载 风尘 的 歌 <br> 

今夜 才 又 想起 拥抱 的 时 刻 <br> 

<br> 

独自 走 的 一 段 旅程 <br> 

是 否 还 装 满 苦涩 <br> 

一 路 风雨 飘摇 那 坎坷 对 谁 说 <br> 

<br> 

来 吧 看 这 远 处 亮 起 的 点 点 星火 <br> 

伸手 触摸 那 写 在 匆匆 旅程 的 歌 <br> 

谁 在 转 过 的 街 口 从 容 挥手 <br> 

谁 用 欢笑 和 拥抱 <br> 

记 住 这 一 刻 
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</p> 
</div> 
<div id="footer"> 版 权 所 有 2006.12.7 Next Station</div> 
</div> 
</body> 
</html> 


(3) 修改 skin.css 文件 ， 设 置 整体 的 margin、padding、 文 字 对 齐 和 背景 色 。 


html,body í 
margin:0px; padding:0px: 
text-align:center; 
background:#e9fbff: 

} 


(4) 使 用 相对 定位 将 整个 网 页 的 内 容 水 平 居 中 显示 ,也 就 是 把 id 为 container 的 


div 水 平 居 中 显示 : 


#container{ 

position: relative; 

margin: 0 auto: 

padding:0px: 

width:700px; 

text-align: left; 

background:url(../images/container_bg.jpg) repeat-y; 
k 


(5) 设置 最 上 面 的 图 片 及 导航 条 样式 : 


#bannerí 
margin:0px: padding:0px: 

} 

#links{ 
font-size:12px: 
margin:-18px 0px Opx Opx; /* 上 margin 一 定 要 设置 为 负 值 */ 
padding:0px; 
position:relative; 

} 

#links ul{ 
list-style-type:none: 
padding:0px; margin:0px: 
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width:700px: 

} 

#links ul li í 
text-align:center; 
width:100px; 
display:block; 
float:left; 

J 

#links br{ 
display:none; 


(6) 设置 中 间 部 分 左边 名 为 leftbar 的 div 的 样式 : 


#leftbar{ 
background-color:#d2e7ff: 
text-align:center; 
font-size: 12px: 
width:150px: 

float:left; 
padding-top:20px; 
padding-bottom:30px; 
margin:0px; 

} 

#leftbar p{ 
padding-left:12px; padding-right:12px; 


(7) 设置 中 间 主 要 内 容 ， 也 就 是 名 为 content 的 div 的 样式 : 


#content í 
font-size: 12px; 
float:left; 
width:SS0px: 
padding:5px 0px 30px 0px: 
margin:0px: 
backgeround:url(../images/bg1.jpg) no-repeat bottom right; 
} 
#content p. #content h4 í 
padding-left:20px: padding-right:15px; 
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(8) 设置 底部 的 footer 的 样式 : 


#footer{ 
clear:both; 
font-size:12px; 
width:100%: 
padding:3px 0px 3px 0px; 
text-align:center; 
margin:0px; 
background-color:#b0cfff; 
j 


(9) 调整 内 容 ， 显 示 细 节 的 样式 : 


Picl{ 
border:1px solid #00406c: 

} 

Pp.leftcontent{ 
text-align:left; 
color:#001671; 

j 

h4{ 
text-decoration:underline; 
color:#0078aa; 
padding-top:15px: 
font-size: 16px:; 


} 


(10) 运行 网 页 ， 结 果 如 图 8-23 所 示 。 


+ 第 二 阶段 + 


练习 2: 使 用 上 中 布局 ， 实 现 如 图 8-25 所 示 的 网 页 
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鲜花 礼品 自助 订 花 sean 花 之 物语 会 员 中心 联系 我 们 支付 方式 


a 100~200 元 
kaia Festa wayay SIT KIT] 
a 3002-4005; 
a 4002-5005; 
S 5002800 Hse 
a 600~800 元 ;各 种 几 花 所 代表 的 信义 ， 花 的 吉 乱 喜乐 与 人 的 各 种 和 
s 00E ;开花 与 亲生 之 道 ， 每 天 清 展 的 利 一 全 阳光 
区 看 打道 ; 世界 各 地 关于 送 花 的 习俗 
， 种 花 与 运 花 FeR 


图 8-25 实现 上 中 布局 的 网 页 


[ 课 后 作业 】 


实现 如 图 8-26 所 示 的 页 面 。 
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图 8-26 需 实现 的 页 面 


。249 。 


